一、概念
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 命令 ,进入图形化界面。
第一步:选择项目路径
第二步:填写项目信息
第三步:选择项目模板
第四步:选择项目需要的功能模块
第五步:配置项目的功能模块
第六步:开始创建项目
第七步:创建成功,并运行项目