首页 > 其他分享> 文章详细

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

2021-02-09 22:29:24 阅读：228 来源： 互联网

标签：VueCLI npm Vue CLI2 CLI render vue cli

编译器：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9