VS2017+VUE创建项目爬坑

以下内容适用于一直在用VS做项目，突然接到vue.js需要使用VSCode并且不想用的旁友。

在开始之前，需要安装Node.js编辑器，可以参考这篇文章，这里不再赘述。

https://blog.csdn.net/junshangshui/article/details/80376489?tdsourcetag=s_pcqq_aiomsg

安装VS2017时需要把Node.js支持装上，如果没有装，可以点击新建->项目，

安装完成之后，我们会发现所有的模块都是缺失的

此时需要使用Node.js command prompt（一定要用管理员身份运行）控制台进入到项目目录

然后安装所有模块

npm install

安装好之后效果如下

接下来就可以开始愉快的编程了，如果你是之前以前有项目的代码，只需要将src文件夹替换掉即可，并且同样使用Node.js控制台安装所需要的模块。

但是这里会出现一个兼容的问题，3.0版本的vue使用了runtime模式，在实例化Vue的时候采用render的方式，如下：

new Vue({render: h => h(App)
}).$mount('#app');

但是之前项目中是使用compiler模式的，如下：

new Vue({el: '#app',components: { App },template: '<App/>'
})

这两种写法其实意思是一样的，但是使用compiler模式的时候需要被编译成render来运行，这里通常会报如下错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这个时候，需要在最外层创建vue.config.js文件

添加以下内容即可

module.exports = {runtimeCompiler: true
}

至此，整个项目完美运行。

最后可能会发现爬这个坑多此一举，这几天看各种论坛，都说VSCode好用，轻便，以后会取代VS什么的。毕竟VS太过庞大，可能我以后也会更愿意使用VSCode的(●'◡'●)

VS2017+VUE创建项目爬坑相关推荐

vue创建项目踩坑记录 443 ECONNRESET
安装nodejs 并创建vue 项目的记录首先安装nodejs 是傻瓜式操作,配置环境变量的可以参考这个博文: 点击跳转安装教程查看node版本和npm 版本使用淘宝镜像cnpm 第二步项目初始 ...
vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么
VUE项目爬坑---6.vuex的真正存在的意义是什么一.总结一句话总结: a.[避免低效的数据传递]:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递 ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。从头开始。...
从头开始vue创建项目 Do you ever read an article on Medium (or elsewhere) about passive income, side projects ...
vue创建项目报错command not found:create-webpack
vue创建项目报错command not found:create-webpack vue创建项目报错command not found:create-webpack,请不要怀疑,是你创建项目命令写错 ...
改造ie老项目爬坑之showModalDialog
改造ie老项目爬坑之showModalDialog 业务场景公司的老项目都是使用的window.showModalDialog()这种方式实现的打开窗口,并且项目里的提示语均使用的alert和con ...
kotlin与java混合开发_使用kotlin和Java混合开发Android项目爬坑记录
使用kotlin和Java混合开发Android项目爬坑记录不定期将开发过程中遇到的问题添加在此处,加深记忆. 主要内容包括但不限于java与kotlin语言的一些区别,以及在使用android-s ...
8种方法解决vue创建项目报错：command failed: npm install --loglevel error
8种方法解决vue项目创建失败问题 1.重建项目 2.清除缓存 3.重装淘宝源 4.修改useTaobaoRegistry 5.重装node 6.删除npmrc文件 7. node版本问题 8.css ...
vue创建项目都忘记了怎么办
公司给了一个比较特殊的项目,不需要使用编写前端,其他几乎都是纯后端,只有很少的几个前端页面,我还是用的LayUI+JQuery做的后台页面,没做多久就看到了LayUI下线的说明,有点蕾姆~~~~~,对 ...

VS2017+VUE创建项目爬坑

VS2017+VUE创建项目爬坑相关推荐

最新文章

热门文章