如何使用vue-cli4.0快速搭建一个项目

安装好了之后输入 vue -V 查看版本

我我我草！！！最近只顾着看技术了，没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了！！！

有没有搞错，我 vue-cli3.0 还没来得及用上呢！还好看了下文档，除了跟 vue-cli3.0 的目录有点变化其他没变。

那就直接开始搞 vue-cli4.0 吧！

二、搭建项目

vue-cli3.0 以后项目创建的命令变成了下面这样

vue create  //文件名 不支持驼峰（含大写字母）

竟然还被嫌弃了我的网速，我还就不用 cnpm 了！

选择不使用淘宝镜像后，选择手动配置

default 是使用默认配置

Manually select features 是自定义配置

我的自定义配置如下

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

然后选择什么时候进行代码校验，Lint alt="如何使用vue-cli4.0快速搭建一个项目">

下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json存放到包中。json中

本着项目结构简单的想法,我选择了第二个

最后就是是否保存本次的配置了,N不记录,如果选择Y需要输入保存名字

我这里就不保存了,原因是熟能生巧!哈哈哈

然后就等待创建项目吧

出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入npm运行服务就可以了

你以为这样就完了吗?我也是这样认为的,可它不是这样的!

很明显,虽然项目能够正常启动,但是我的nodeJs版本用的太高了,然后我给回退到了11.11.0版本

虽然没影响太大的影响,但是我不想看见警告!回退之后,重新跑项目就不会有问题了。

<强>三、环境配置

下面就是关于项目的环境配置了,我这边一般喜欢用测试,预览,生产分别表示测试,预览,生产三种环境

如何使用vue-cli4.0快速搭建一个项目