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

• 编译器：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文件，文件名规定是这个，否则找不到。

标签：VueCLI,npm,Vue,CLI2,CLI,render,vue,cli
来源： https://blog.csdn.net/SuihideOmelet/article/details/113776517