前端工程化（三）--- vue-cli 脚手架

一、概念

​ vue-cli 是 Vue.js 的开发工具，它简化了程序员基于webpack 创建工程化的Vue项目的过程。可以让开发者把精力专注在应用逻辑上，而不必花好几天去纠结 webpack 配置的问题。

​ 中文官网：Vue CLI (vuejs.org)

二、Vue项目的运行流程

​ 在工程化的项目中，vue要做的事情很单纯就是通过 main.js 将App.vue 渲染到index.html的指定区域中。分开来说就是，App.vue 用来编写待渲染的模板结构，index.html 中要预留好 id=‘app’ 的 el 区域，然后main.js 把 App.vue 渲染到了 index.html 所预留的区域中。

三、vue-cli 生成的项目目录结构

四、安装和使用

1、运行 npm install -g @vue/cli 安装Vue脚手架对应的包。

2、使用 vue-cli 脚手架 创建项目的方式有两种，第一种方式是基于终端交互式命令行 的方式：

​ ① 在项目存放位置下打开终端，运行 vue create project_name(项目名称) ，创建项目目录。

​ ② 创建好项目目录后，终端进入第二个界面，选择项目模板，上下按键切换不同模板，按回车确定选择模板。

​ ③ 这里我们选择自由选择项目配置，按回车确认选择，进入第三个界面，选择项目所需功能模块。上下按键切换不同模块，按空格键，选中模块。

​ ④ 选好项目要配置的功能模块后，按下回车确认选择，进入下一个界面，进行功能模块配置。

​ ⑤ 项目创建完成，依次执行终端提示的命令，即可运行项目。

3、第二种方式是基于 图形化界面的方式，创建项目：

​ 在项目存放位置下打开终端，运行 vue ui 命令 ，进入图形化界面。

第一步：选择项目路径

第二步：填写项目信息

第三步：选择项目模板

第四步：选择项目需要的功能模块

第五步：配置项目的功能模块

第六步：开始创建项目

第七步：创建成功，并运行项目