Vue.js(十四)：VueCLI脚手架（CLI2&CLI3）

2023-12-23 19:37:15

编译器：IntelliJ IDEA 2020

1.Vue CLI的介绍和安装

（1）什么是Vue CLI

如果只是简单写几个Vue的Demo程序,那么不需要Vue CLI.
如果在开发大型项目，那么必然需要使用Vue CLI
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常会使用一些脚手架工具来帮助完成这些事情。
CLI是什么意思?
- CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.
- Vue CLI是一个官方发布vue.js 项目脚手架
- 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

（2）Vue CLI使用前提 - Node

安装NodeJS
- 可以直接在官方网站中下载安装.
- 网址: http://nodejs.cn/download/
检测安装的版本
- 默认情况下自动安装Node和NPM
- Node环境要求8.9以上或者更高版本
什么是NPM呢?
- NPM的全称是Node Package Manager
- 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包)的标准。
- 后续会经常使用NPM来安装一些开发过程中依赖包.

（3）Vue CLI使用前提 - webpack

Vue.js官方脚手架工具就使用了webpack模板
- 对所有的资源会压缩等优化操作
- 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。
Webpack的全局安装
- npm install webpack -g

（4）Vue CLI的使用

安装Vue脚手架
- npm install -g @vue/cli
注意:上面安装的是最新版本，此时的版本是Vue CLI v4.5.11，如果需要想按照Vue CLI2的方式初始化项目时不可以的。需要拉取Vue CLI2的模板才能在CLI4上使用，CLI4兼容CLI3的使用。
在官网上有说明https://cli.vuejs.org/
Vue CLI2初始化项目
- vue init webpack my-project
Vue CLI3初始化项目
- vue create my-project

2.Vue CLI2初始化项目过程

在需要创建项目的文件夹下输入Vue CLI2的初始化命令
根据下图按enter键进行初始化
初始化成功后在相应目录下生成对应的项目文件

3.Vue CLI2目录结构解析

4.runtime+compiler和runtime-only的区别

具体解析在官方网站上也有解释：https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6%E7%BC%96%E8%AF%91%E5%99%A8vs%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
简单总结
- 如果在之后的开发中，依然使用template，就需要选择Runtime-Compiler
- 如果在之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

（1）render和template

Runtime-Compiler和 Runtime-only创建的项目
它们的区别在项目中的main.js函数中
Runtime-Compiler

new vue({
	el: '#app',
	components: { App },
	template:'<App/>'
})

Runtime-only

new vue({
	el: '#app'
	//箭头函数写法
	render: h=> h(App)
	//完整写法
	/*render : function(h){
		return h(App)
	}*/
})

为什么存在这样的差异?
- 需要先理解Vue应用程序是如何运行起来的。
- Vue中的模板如何最终渲染成真实DOM。

（2）Vue程序运行过程

（3）render函数的使用

使用方式一：

new Vue({
	el: '#app',
	render: (createElement) =>{
	// 1.使用方式一:return createElement('标签','相关数据对象(可以不传)',['内容数组'])
	// 1.1 .render函数基本使用
	//会将接管的app区域替换成<div>h2</div>
	return createElement( 'div', {class: 'box '},['h2'])
	// 1.2.嵌套render函数
	//会在<div>h2</div>中嵌套<h2>标题啊</h2>
	//<div>h2<h2>标题啊</h2></div>
	return createElement( 'div',{class: 'box'},[ 'h2' ,createElement(' h2'，['标题啊'])])

使用方式二（传入一个Vue组件）：

new vue({
	el: '#app',
	render: (createElement) => {
		//2.使用方式二:传入一个组件对象
		return createElement(cpn)
	}
})

5.npm run build和npm run dev

在CLI2中npm run dev命令是启动本地服务器在服务器中打开项目，npm run build用于开发完成后将项目打包发布
npm run build
npm run dev

6.CLI3创建项目和目录结构

vue-cli 3与2版本有很大区别
- vue-cli 3是基于webpack 4打造，vue-cli 2还是webapck 3
- vue-cli 3的设计原则是“O配置”，移除的配置文件根目录下的，build和config等目录
- vue-cli 3提供了vue ui命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
- vue-cli3启动本地服务的命令是npm run serve，打包命令还是npm run build
在需要创建项目的文件夹下输入Vue CLI3的初始化命令
根据下图进行初始化
注意：项目名称不要包含大写字母以及中文
键盘上下键选择，enter确认
确认开始安装，安装成功后生成对应项目
目录结构

7.CLI3的配置在哪里

UI方面的配置
在命令行中启动服务器：vue ui
启动后在浏览器打开
在原项目中也能找到
如果需要自定义配置，可以在项目的目录下创建一个vue.config.js文件，文件名规定是这个，否则找不到。