1.使用vue-cli4创建项目

在创建vue-cli4项目之前 由于当时安装的vue-cli版本号是2.6.3版本的,因此首先我们应该将全局vue-cli版本进行升级。这里有一个坑。就是卸载全局的vue-cli2没有效果。如果出现无法卸载或者更新的情况，可以在电脑环境变量中的系统变量处重新添加新的系统变量。

BBbrJf.png

然后重新设置npm的默认安装路径:

//设置npm的安装路径前缀
npm config set prefix "D:\nodejs" 
//可以自定义一下缓存路径 也可以不定义
npm config set cache "D:\nodejs\node_cache"
//然后重新卸载vue-cli2
npm uni vue-cli -g
//清理缓存
npm cache clean --force
//重新安装vue-cli3
npm i -g @vue/cli

如果还是不行的话 卸载node.js 并清理掉有关npm和node的文件夹 重新再安装一次node。

安装完成后 我们可以看下此时的vue-cli的版本

//windows命令输入
vue --version

BBLQC6.md.png

1.项目创建基础配置

然后我们开始利用vue-cli4创建项目

打开cmd 输入命令

vue create '项目名称'

如果出现以下信息则代表vue-cli3安装成功了

如果出现 ‘vue 不是内部或外部命令，也不是可运行的程序’

那么可能是你的vue-cli不是全局安装的。 此时你需要重新安装vue-cli为全局版本 我这里就不再过多的赘述了

BBLbZ9.md.png

此时项目并没创建完成,我们还需要进行项目的配置

这里有两个选项 一个是默认选项 一个是自定义选项 我们看到 默认选项中有 安装babel 和eslint 显然是不太够的 所以我们选择自定义项目选项

BBOXwj.md.png

如上图 我们看到有较多的选项 我司目前项目用到了 babel Router Vuex CSS-pre Linter 所以我们可以选择安装这些

1.1 Router模式选择

BBXOgK.md.png

选择了Router 那么会让我们选择Router的模式 是否选择 history 模式 有关Router的history 模式和 hash模式 下次有机会再出一篇相关文章

这里我们选择使用 history 模式

1.2 CSS预处理语言选择

BBjvR0.png选择了CSS 预处理 那么会让我们选择 预处理的css语言 这里我们使用 Sass/SCSS(with node-sass)

1.3 Eslint语法选择

BBv6S0.md.png

选择了Linter 那么会让我们选择 lint的语法配置

第一个选项是 仅进行错误预防的处理

第二个选项是 遵循爱彼迎的语法配置

第三个选项是 eslint标准语法配置

第四个选项是 使用Prettier(一种前端标准化的代码管理)的这种语法配置

我们这边 选择标准的eslint 语法。

选择完成后 

//保存代码时 就进行语法检测  
lint on save
//fix和commit 的时候进行检测
lint and fix on commit

选择 lint on save 后

BDSj7F.md.png

这里表示的是 我们选择的bable 和eslint 的配置文件是单独作为一个文件还是 直接配置在package.json中

为了更加熟悉项目结构 我们选择单独的配置文件。

选择完了之后 会在询问我们是否保存当前的项目配置作为之后的预处理方案的项目 这里我们可以选择保存也可以选择不保存。

2.基础项目完成

至此 基础项目配置已经完成。 开始生成项目目录以及下载各种依赖包。

BDCYSs.png

看到以上的信息 则表示项目创建成功了。