使用VUE CLI创建vue项目的步骤

使用Vue CLI创建项目的步骤！

本篇文章我们将会从认识vue-cli , 安装vue-cli, 使用vue-cli创建项目三个方向学会使用VUE CLI 来创建一个vue项目

认识VUE CLI

简单的理解vue cli 就是一个快速构建项目的工具。存在于整个vue生态系统的工具模块，是一个基于 Vue.js 进行快速开发的完整系统，该系统有几个独立的部分，CLI, CLI服务，CLI插件
1.CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

2.CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创 建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：加载其它 CLI 插件的核心服务；一个针对绝大部分应用优化过的内部的 webpack 配置；项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令

3.CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单 元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

安装VUE CLI

1.安装命令

2.检查安装是否成功

看到vue-cli的版本信息安装就成功了!就可以愉快的进入项目搭建环节了

使用VUECLI创建项目

1.确定好创建项目的位置，

我喜欢直接创建在桌面，如下图直接点击桌面在地址栏输入cmd回车就激活了黑窗口了（如果你喜欢把项目保存在其他的地方也可采用同样的方式，当然你也可以在桌面创建好项目后在拖到你想要的文件夹下）

2.激活黑窗口后使用 vue create 项目名 这个命令创建项目 我的项目名是 sanmu

3.回车后会让你选择创建模式 自定义创建和默认创建

Manually select features – 这一句可以理解为自定义创建可以更具需要手动选择配置
default (babel, eslint) – 这一句可以理解为默认创建只有babel 和 eslint 两项配置
自动选则的是默认创建，但是我们很多时候需要自定义创建，你可以点击键盘的向下箭头在点击空格选择第二个自定义创建

4.自定义更具需要选择配置

各项配置说明：

• Babel：es6 转 es5
• TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：
• Progressive Web App (PWA) Support是Google推出的平时我也没使用过感兴趣的小伙伴可以百度一下
• Router：路由。在脚手架工具中，它会自动在本项目中使用路由，创建好基本的路由配置（不再需要手动去安装vue-router）。`
• Vuex;是vue的状态化管理模式，如果项目大可以选择vuex来管理数据
• CSS Pre-processors：CSS 预处理器，后续会提示你选择 less、sass、stylus 等
• Linter / Formatter：代码格式校验，ESLint 代码格式校验。后续会再次让你具体选择eslint的标准。
• Unit Testing 单元测试
• E2E Testing 测试
  
  选择好你需要的配置就直接回车！（使用方向箭和空格选择你需要的配置）

5.路由模式选择

是否使用 history 路由模式，这里输入 n ，不使用history模式，而是用hash模式。

6.选择css预处理的

根据自己的需要选择css预处理的方式，我选择less

7.选择代码风格校验工具

回车选择后建议把下面两项检验都选择

• Lint on save：在保存文件时会检查eslint错误。

• Lint and fix on commit：每当执行 git commit 提交的时候，会自动修正eslint错误。
  

8.相关配置文件保存位置的选择

abel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

• In dedicated config files：分别保存到单独的配置文件
• In package.json：保存到 package.json 文件中
  这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

9.最后一项是否保存当前配置

? Save this as a preset for future projects? (y/N) N
这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。
请根据自己需要输入 y 或者 n。

10.配置向导结束 开始装包构建项目

开始装包构建项目啦，稍等片刻就好

11 项目创建成功

看到这样的页面就说名你的项目创建成功了 cd到项目文件下在npm run serve 启动项目就好了

12 启动项目成功

项目启动成功后会在我们本地开启一个服务端口 把第一个复制到浏览器中就可以看到初始化的项目了

13 在浏览器中浏览项目

创建成功后直接把项目文件夹托到编译器中查看项目的文件结构