vue 3.0和2.0区别_vue-cli 2.0 自我升级 3.0 的一些坑

(更新) 之前没留意，原来我更新的是vue-cli4了,感谢评论里大大的提醒，我以下的过程是升级到了4的

前几天在跟同事合作开发的时候，被迫用vue-cli3.0构建，最近终于闲下来学习了一下vue-cli3.0的简单构建。

之前我是用2.0来进行项目构建的，用习惯了2.0然后突然让你用3.0构建，感觉会很怪毕竟命令也不一样了。

下面就简单分享一下我构建的过程

首先我们来到官网

安装 | Vue CLI​cli.vuejs.org

这里会教你如何安装新版本

npm install -g @vue/cli# ORyarn global add @vue/cli

当然如果你们是已经装了2.0的话就需要先卸载

npm uninstall vue-cli -g或yarn global remove vue-cli

其实链接里面都有，这里只是方便大家快速搭建，想了解更多还是去官网看吧

1.快速原型开发

npm install -g @vue/cli-service-global

其实就是让你装一个这个东西，这个好像是运行的时候会用到的，之前被迫用3.0的时候我没装这个然后就报错了

2.创建一个项目

首先我们通过这个命令来创建项目

这里会让你选择，第一个就只是简单构建项目，下面的是自定义构建(这里和2.0不一样，2.0会一个个的问，而这个对于想最简构建的人来说就方便了)

我们选择第二项

自己看需要来选择

这里 a是全选， 空格是选择(取消)，i是反选

选择好之后就开始构建

构建完之后这里会提示你用 npm run serve

不过可能有很多人和我一样在看文档的时候没看清文字只看命令

直接构建

在这个时候你会发现报错了

不过这个时候在代码里面也是可以能把他改正确，把下面的@ 改成./..就ok了

不过这个时候又会报另一个错误了，那怎么办？？只需要把下图的代码注释掉就可以了

瞬间正常

如果你想改title,改路由或者说要引入第三方插件，你会发现这个时候你是无从入手的。哪怕你是百度找到了怎么引入的方法，你都是会报错。主要你根源就错了

所以正确的方式是，返回上一级目录，也就是我们平时2.0构建的目录

这是我的例子

用 npm run serve 跑

什么都不用改，正确运行

简单总结一下，可能我是中途去支援别人，突然让你用个3.0在什么命令都不熟悉的情况下去跑代码真的是让人一脸懵逼。导致我一开始对3.0是有点排斥的。毕竟快速看官网文档也被文档坑了，然后配置文件的启动/构建命令也是挺坑人的 。

以前这段是写启动命令的写法的，你现在直接复制过去会显示没有这个命令，如果不是百度一下跟本不知道是改成 npm run serve （所以才需要自己从0开始构建一次）

现在还有一个疑惑：

2.0的时候是有webpack.dev.conf.js这样的文件，3.0现在没有看见这些去哪里了，后面有时间研究一下