学习来源：[coderwhy]: www.bilibili.com/video/BV157…
简介
CLI（Command-Line Interface脚手架）：开发大型项目必备，不需要手动配置很多繁琐的步骤，快速搭建Vue开发环境以及对应的webpack配置
- 前提：Node
- 安装：npm install -g @vue/cli
- 卸载：npm uninstall vue-cli -g
CLI2
使用
Vue CLI2初始化项目：vue init webpack my-project
Vue CLI3初始化项目：vue create my-project
（构建项目方式选择）Vue build (Use arrow keys)
Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re nder functions are required elsewhere
是否对js代码进行一些限制（相当于代码的严格模式，代码不规范会进行报错）
e2e -> end to end 利用selenium进行自动化测试
目录结构解析
runtime+compiler和runtime-only的区别和选择
- 区别只在main.js当中
vue程序的运行过程
- 当你将一个template传给vue时,vue会将其parse(解析)成ast(抽象语法树)的结构
- 编译成render函数,通过render函数翻译成virtual dom,形成虚拟dom树
- 根据虚拟dom树渲染到界面上
- 所以对于runtime-compile来说经过了template->ast->render->virtual dom->UI的过程
- 而对于runtime-only只经过render->virtual dom->UI
render究竟是什么呢
render时vue提供的一个函数,用于构建虚拟dom,而用render函数构建dom,vue就免去了转译的过程
render:function(createElement){
//1.createElement('标签',{标签的属性},[标签的内容])
//会用创建的标签替换掉挂载的el
return createElement('h2',{class:'box'},['hello world'])
//2.createELement(组件对象)
return createElement(App)
}
或者
render:h->h(App)
那么vue中有template去哪里了
- 虽然vue中有template标签,但是组件在使用之前已经被编译了
- 所有的template都已经被编译成了render函数
- vue-template-compiler帮我们解析.vue文件
箭头函数的基本使用(es6)
const C = (参数) => {}
const C = num => {} //如果只有一个参数可以把()去掉
const C = (num1, num2) => num1 + num2
//如果代码块中只有一条代码可以省去{}
箭头函数的this如何查找
const obj={
setTimeout(function(){
console.log(this); //window
})
setTimeout(()=>{
console.log(this0;) //obj对象
})
}
结论：向外层作用域中，一层层查找this，直到有this的定义
总结
- mplate-compiler是虽然只是开发时依赖,因为因为在运行时,.vue文件中已经不存在任何template的标签了,所以我们用runtime-only就足够了,就能省去template->ast的步骤,效率更高
- 当你的template是在js中进行开发的,那么就选择runtime-compiler
- 如果时用.vue进行开发,就选择runtime-only
CLI3
vue create test
progressive web app support先进的wep app支持
配置去哪了
- 启动配置服务器:vue ui
- 内置到node_modules中
- 自定义配置 vue.config.js(指定名称)
module.exports = {}
