当前位置: 代码迷 >> 综合 >> VS2017+VUE创建项目爬坑
  详细解决方案

VS2017+VUE创建项目爬坑

热度:129   发布时间:2023-09-27 01:58:50.0

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

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

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

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

VS2017+VUE创建项目爬坑VS2017+VUE创建项目爬坑

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

VS2017+VUE创建项目爬坑

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

VS2017+VUE创建项目爬坑

然后安装所有模块

npm install

安装好之后效果如下

VS2017+VUE创建项目爬坑

接下来就可以开始愉快的编程了,如果你是之前以前有项目的代码,只需要将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文件

VS2017+VUE创建项目爬坑

添加以下内容即可

module.exports = {runtimeCompiler: true
}

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

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

  相关解决方案