使用 vue/cli 4.5.11 创建Vue项目

一、准备工作

1. 环境要求

vue-cli要求node版本8或者更高（8.10.0+推荐）；vue-cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ）。

2. 安装vue-cli4

如果原本安装了cli2.0版本，需要先卸载旧版本（npm uninstall vue-cli -g），然后清除缓存（ npm cache clean --force），再安装vue-cli4（npm install -g @vue/cli），查看vue-cli版本确认是否安装成功（vue -V）。

二、使用Vue CLI4创建Vue项目

1.创建项目（vue create project-name），选择一个预设（有3个预设置），这里选最后一个——手动选择功能。

按住上下键进行调转，按空格键选择/取消，根据自己实际需求选择项目所需要的功能。

2.选择vue版本，这里选2.0。

3.是否使用class风格装饰器。

即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

4.使用Babel与TypeScript一起用于自动检测的填充 。
5.路由模式。

6.dart-sass保存后编译/node-sass实时编译，这里选dart-sass

7.代码格式化检测。

8.代码检查方式，选择保存的时候检查。

9.在哪里放置Babel、ESLint等的配置，选择第一个，在独立的配置文件夹。

10.是否保存此次的预设以供将来的项目使用。

11.创建成功。

三、运行

进入项目目录，运行项目（npm run serve）。

四、相关文章

vue-cli2和vue-cli3的区别
使用vue-cli3创建项目，如何配置vue-config.js
vue.config.js 配置
Vue CLI 配置参考