什么是Vue CLI
如果只是写简单的demo程序,不需要Vue CLI
如果开发大型项目,必然要使用Vue CLI
- 使用Vue.js开发大型项目时,需要考虑代码目录结构、项目结构和部署、热加载等事情
- 如果每个项目都需要手动完成这些工作,效率太低,所以通常会使用脚手架工具来帮助完成
CLI是什么意思?
- CLI是Command-Line Interface,翻译为命令行界面,俗称脚手架
- Vue CLI是官方发布Vue.js的项目脚手架
- 使用Vue CLI可以快递搭建Vue开发环境及对应的webpack配置
脚手架的样子
Vue CLI使用前提
Node
安装NodeJS
直接官网中下载安装 http://nodejs.cn/download/
检测安装的版本
Node环境要求8.9以上或更高版本
什么是NPM
- NPM的全称是Node Package Manager
- 是一个NodeJS包管理和分发工具
- 开发过程中会经常使用NPM来安装依赖包
webpack
Vue CLI使用了webpack模板
- 对所有的资源会进行优化操作
- 在开发过程中提供了一套完整的功能,使开发变得高效
webpack的全局安装
npm install webpack -g
webpack相关笔记 vue2.x笔记6-webpack详解(1)https://blog.csdn.net/notChange/article/details/122739328?spm=1001.2014.3001.5501
vue2.x笔记7-webpack详解(2)https://blog.csdn.net/notChange/article/details/122939693?spm=1001.2014.3001.5501
Vue CLI的使用
安装Vue脚手架
npm install @vue/cli -g
现在安装的是Vue CLI3版本,想要使用Vue CLI2只需要拉取2.x模板
Vue CLI2初始化项目
vue init webpack my-project
Vue CLI3初始化项目
vue create my-project
Vue CLI2
创建项目
目录结构详解
Runtime-Compiler和Runtime-only的区别
在创建项目时,Vue build有两个选项:Runtime + Compiler和Runtime-only
Runtime + Compiler:建议大多数用户使用
Runtime-only:比上面那种模式轻大约 6KB min+gzip,但是 template (或任何特定于vue的html)只允许在.vue文件中使用,其他地方用render函数
用两种模式生成项目,主要区别就在于main.js文件
从图中可以看出,区别就在于Vue实例中一个用tempalte+components,一个用render函数
为什么存在这样的差异呢?
- 需要先理解Vue应用程序是如何运行起来的
- Vue中的模板如何最终渲染成真是的DOM
- 看下面这幅图
runtime+compiler和runtime-only的区别:
- runtime+compiler的运行过程:template -> ast -> render -> vdom -> UI
- runtime-only的运行过程:render -> vdom -> UI
- runtime-only比runtime+compiler轻,代码量更少
- runtime-only性能更高,运行更快(runtime-only省略了template -> ast -> render的运行过程)
- runtime-only只能识别render函数,不能使用template,.vue文件中的template是由vue-template-compiler处理的
render函数
普通用法:createElemrnt('标签', {标签的属性(可以不传)}, ['内容数组'])
new Vue({
el: '#app',
render: function(createElement) {
// 基本使用
return createElement('h2', {class: 'box'},['hello world'])
// 嵌套使用
return createElement('h2',
{class: 'box'},
['hello world', createElement('button',['按钮'])])
}
})
传入组件用法
const cpn = {
template:`<div>{{msg}}</div>`,
data() {
return {
msg: '我是组件cpn'
}
}
}
new Vue({
el: '#app',
render: function(createElement) {
return createElement(cpn);
}
})
Vue CLI3
Vue CLI3与2的区别
- vue-cli3是基于webpack4打造,vue-cli2还是webpack3
- vue-cli3的设计原则是“0配置”,移除配置文件,build和config等目录
- vue-cli3提供了vue ui命令,提供了可视化配置,更加人性化
- 移除了static文件夹,新增了public文件夹,并且index.html移到了public中
创建项目
选择保存配置后,在创建项目时,可直接选择
需要删除配置,可打开C:\Users\用户名\.vuerc文件,删除mypreset即可
目录结构详解
配置去哪了?
UI方面的配置,启动配置服务器:vue ui
node包中的配置
自定义配置