vue-cli2.0 与 vue-cli3.0 配置的区别

提示：要了解vue-cli2.0与vue-cli3.0区别，首先你要熟悉vue-cli2.0

从最明显最简单的开始

项目目录结构

 

 

可以明显的看出来，vue-cli2.0与3.0在目录结构方面，有明显的不同（vue3.0我是安装了css预处理器，所以看上去内容更丰富哈）

vue-cli3.0移除了配置文件目录，config 和 build 文件夹

同时移除了 static 静态文件夹，新增了 public 文件夹，细心的你，打开层级目录还会发现， index.html 移动到 public 中

配置项

vue-cli2.0的域名配置，分为开发环境和生产环境，所以配置域名时，需要在config中的dev.env.js和prod.env.js中分别配置

前面说过，到了3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

当然，没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

 

 

在3.0中，vue.config.js中有关于mock的配置

要注意的是：mockjs是用来模拟产生一些虚拟的数据，方便前端在后端接口还没有开发出来时独立开发

即使使用了真实的url，但是mockjs拦截了ajax请求，返回的是设定好的本地数据

如果你想正常从后端获取数据，就要关掉mock的使用，我是直接删掉的，当然你可以选择别的办法

main.js中有一段关于mock.js的描述（注意上线前要去掉你的mock）

 

 

可视化界面

找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作

对于不喜欢命令行的皮友可以说是非常友好了

 

 

 

 其他

　全局安装vu-cli 3.0 

npm install -g @vue/cli 

　　如果之前安装了2.0版本，先卸载 npm uninstall -g vue-cli )

　　 安装完 3.0 后，有以下两种创建项目的方式：

　　1： vue create < project-name> 

　　然后会出现默认和手动两个选项，跟着步骤走就好（傻瓜式操作）

　　2:   用视图创建项目  vue  ui （上面已经说了）

 

　在2.x0中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行

　而在3.0中，只有依赖那个属性的 watcher 才会重新运行 ，这样使得变更通知更加精准

再有其他的变化，可能就涉及到底层了，暂且不讨论，毕竟实际项目进度优先，研究底层技术这个事，就留给诸位大牛吧

 

之前大部分地方vue-cli3.0和vue-cli2.0都写的vue2.0 vue3.0 

好在被一楼的姐妹儿指出来了 

感谢 有机会请你吃火锅