使用vue-cli4.0快速搭建一个项目的方法步骤
前言
最近公司的项目终于到了空闲期，而闲不住的我终于把目标放到了项目的迁移上面
因为公司的项目比较早的原因（虽然当时vue-cli也出来了一段时间，但是不敢轻易尝试啊！）
所以使用的环境还是vue2.x版本的，而又因为公司的前端项目都是我来搭建的原因（并不是技术大佬，入职早！）
所以所有项目开发的时候一直在用的vue-cli2.0，后来项目多了也没时间就没往vue-cli3.0迁移
现在终于到了空闲期，可以尝试着慢慢迁移了
本篇文章就是主要记录迁移的过程和vue-cli3.0的搭建过程
一、升级本地环境
因为vue-cli3.0要nodeJs≧8.9（官方推荐8.11.0+），所以我们先去官网下载一个稳定的新版本覆盖本地版本
我安装的是node12.13.0版本，因为之前我本地全局安装了2.0的环境，所以需要全局卸载再安装3.0
npmuninstall-gvue-cli npminstall-g@vue/cli
安装好了之后输入vue-V查看版本
我我我草！！！最近只顾着看技术了，没发现10月16日官方已经宣布vue-cli4.0已经正式发布了！！！
有没有搞错，我vue-cli3.0还没来得及用上呢！还好看了下文档，除了跟vue-cli3.0的目录有点变化其他没变。
那就直接开始搞vue-cli4.0吧！
二、搭建项目
vue-cli3.0以后项目创建的命令变成了下面这样
vuecreate//文件名不支持驼峰（含大写字母）
竟然还被嫌弃了我的网速，我还就不用cnpm了！
选择不使用淘宝镜像后，选择手动配置
default是使用默认配置
Manuallyselectfeatures是自定义配置
我的自定义配置如下
选择是否使用路由historyrouter，其实直白来说就是是否路径带#号，建议选择N，否则服务器还要进行配置
css的预处理器我选择的是Sass/SCSS(withdart-sass)。node-sass是自动编译实时的，dart-sass需要保存后才会生效
sass官方目前主力推dart-sass最新的特性都会在这个上面先实现
选择ESLint代码校验规则，提供一个插件化的javascript代码检测工具，ESLint+Prettier使用较多
然后选择什么时候进行代码校验，Lintonsave保存就检查，Lintandfixoncommitfix或者commit的时候检查，建议第一个
下面就是如何存放配置了，Indedicatedconfigfiles存放到独立文件中，Inpackage.json存放到package.json中
本着项目结构简单的想法，我选择了第二个
最后就是是否保存本次的配置了，N不记录，如果选择Y需要输入保存名字
我这里就不保存了，原因是熟能生巧！哈哈哈
然后就等待创建项目吧
出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入npmrunserve就可以了
你以为这样就完了吗？我也是这样认为的，可它不是这样的！
很明显，虽然项目能够正常启动，但是我的nodeJs版本用的太高了，然后我给回退到了11.11.0版本
虽然没影响太大的影响，但是我不想看见WARN！回退之后，重新跑项目就不会有问题了。
三、环境配置
下面就是关于项目的环境配置了，我这边一般喜欢用test、preview、production分别表示测试，预览，生产三种环境
修改package.json文件如下
"scripts":{
"serve":"vue-cli-serviceserve",
"test":"vue-cli-servicebuild--modetest",//测试
"preview":"vue-cli-servicebuild--modepreview",//预览
"build":"vue-cli-servicebuild--modeproduction",//生产
"lint":"vue-cli-servicelint"
},
在项目根目录下新建.env.test、.env.preview、.env.production文件，分别对应三个环境的配置文件，注意，名字要与--mode后面的名字分别对应
.env.test代码如下
NODE_ENV="test" VUE_APP_BASE_URL="测试环境域名"
.env.pre代码如下
NODE_ENV="preview" VUE_APP_BASE_URL="预览环境域名"
.env.prod代码如下
NODE_ENV="production" VUE_APP_BASE_URL="生产环境域名"
ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了
npmruntest//测试 npmrunpre//预发布 npmrunprod//生产
另外需要说明一点的是，本地环境会默认从.env.development文件中读取配置
所以记得有需要记得新建一个然后存放配置
我的.env.development代码如下
NODE_ENV="development" VUE_APP_BASE_URL="本地环境域名"
四、项目配置
从vue-cli3.0开始build和config目录就取消了，如果需要修改配置，可以在项目的根目录新建一个vue.config.js文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以访问官方文档
五、项目迁移
剩下的就是比较简单的工作了，因为2.0/3.0/4.0的src目录是基本一致的，所以照着原来的项目搬进来就可以了
唯一需要注意的就是路径的问题了
结束语
本来，这个文章真的是为了从2.0迁移到3.0的，没想到4.0都发布了，那刚好迁移到4.0得了
文章标题我会修改为4.0，但是文章内可能还会有3.0我就不修改了
一是证明我的最初想法，二是感慨前端的发展速度！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。