一、概念

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 生成的项目目录结构

vue removeClass在iOS上不起作用 vue app cli_webpack

四、安装和使用

1、运行 npm install -g @vue/cli 安装Vue脚手架对应的包。
2、使用 vue-cli 脚手架 创建项目的方式有两种,第一种方式是基于终端交互式命令行 的方式:

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

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

vue removeClass在iOS上不起作用 vue app cli_vue.js_02

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

vue removeClass在iOS上不起作用 vue app cli_webpack_03

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

vue removeClass在iOS上不起作用 vue app cli_vue.js_04

vue removeClass在iOS上不起作用 vue app cli_vue.js_05

vue removeClass在iOS上不起作用 vue app cli_vue.js_06

vue removeClass在iOS上不起作用 vue app cli_Vue_07

vue removeClass在iOS上不起作用 vue app cli_vue.js_08

vue removeClass在iOS上不起作用 vue app cli_前端_09

vue removeClass在iOS上不起作用 vue app cli_vue.js_10

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

vue removeClass在iOS上不起作用 vue app cli_前端_11

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

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

第一步:选择项目路径

vue removeClass在iOS上不起作用 vue app cli_前端_12

第二步:填写项目信息

vue removeClass在iOS上不起作用 vue app cli_Vue_13

第三步:选择项目模板

vue removeClass在iOS上不起作用 vue app cli_功能模块_14

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

vue removeClass在iOS上不起作用 vue app cli_前端_15

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

vue removeClass在iOS上不起作用 vue app cli_webpack_16

第六步:开始创建项目

vue removeClass在iOS上不起作用 vue app cli_Vue_17

vue removeClass在iOS上不起作用 vue app cli_Vue_18

第七步:创建成功,并运行项目

vue removeClass在iOS上不起作用 vue app cli_前端_19