vue-cli3 创建项目

创建 vue3 项目的完整流程

（1）项目搭建的前期准备

• Vue cli要求Node.js版本8或更高版本（建议使用8.10.0+）
• 先检查vue cli的版本 vue -V 检测vue cli是否安装，安装的版本号
• 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，可以先使用 cnpm uninstall vue-cli -g进行卸载
• 如果没有安装就全局安装一下，命令： cnpm install @vue/cli@版本号 -g

vue cli 的包名称由 vue-cli 改成了 @vue/cli
由于vue cli 4已经出来了，在下载的过程中最好指明一下版本号，

（2）项目的搭建具体操作

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

首先，会提示你选择一个preset（预设）：
① 如果没有保存过预设配置，则会有三个默认预设配置，如下图所示：

如果你之前保存过预设配置，那么就会显示在最上面，那下次你想用的时候直接选择即可

Default（[Vue 2] babel，eslint）：默认设置（直接enter）非常适合快速创建一个Vue2新项目的原型，没有带任何辅助功能的 npm包
Default (Vue3)（[Vue 3] babel，eslint）：Vue3配置，非常适合快速创建一个Vue3新项目的原型，没有带任何辅助功能的 npm包
Manually select features：自定义配置，是我们所需要的面向生产的项目，提供可选功能的 npm 包

一般选择的是自定义配置
通过按方向键 ↓ 进行选择，通过 enter 进行确定
会有三个默认选项，如下图所示：Linter / Formatter

 - Babel       // 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 - TypeScript      // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 - Progressive Web App (PWA) Support     // 渐进式Web应用程序
 - Router     // vue-router（vue路由）
 - Vuex       // vuex（vue的状态管理模式）
 - CSS Pre-processors      // CSS 预处理器（如：less、sass）
 - Linter / Formatter      // 代码风格检查和格式化（如：ESlint）
 - Unit Testing      // 单元测试（unit tests）
 - E2E Testing      // E2E（end to end） 测试

一般除了默认的选项，我们还会选择Router，Vuex，CSS Pre-processors
通过按方向键 ↓ 进行选择，通过 空格键 进行选中，最后点击 enter 回车进行确定

① 根据项目需求选择使用Vue2还是Vue3（默认是Vue3）

② 是否使用history router 一般选择输入n
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

③ css预处理器 （vue3项目一般选择 Less）
主要为css解决浏览器兼容、简化CSS代码 等问题

④ Linter / Formatter
用户选择ESLint，ESLint是一个提供插件化的javascript代码检测工具，（一般选择 ESLint + Prettier）

⑤ 选择什么时候进行检测（一般选择 Lint on save）

⑥选择在哪里存放项目的配置（一般选择 In package.json）

⑦ 选择是否保存本次预设配置（y:保存本次配置，然后去个名字方便下次直接使用； n：不保存本次配置）

⑧ 项目搭建完成

根据提示进行输入指令运行项目即可

出现如下图所示即是表示成功

运行项目在浏览器展示即是如下图所示