Vue-CLI（四）

查看所有安装的包：npm list -g --depth 0

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：npm install -g @vue/cli-init。vue init 的运行效果将会跟 vue-cli@2.x 相同。vue init webpack my-project。此时既可以用CLI2也可以CLI3

node可以直接执行js文件，node是使用C++开发，依赖于Chrome的V8引擎

普通浏览器执行js文件

js----->字节码------>浏览器

Chrome浏览器V8执行js文件

js----->二进制代码

在安装了nodejs的环境下，可以直接使用node命令执行js文件

static下的文件会原封不动的打包到dist中。而src/assets下的文件会被编译。

.gitkeep和.gitignore

package.json中^和~的区别

^2.2.2----->2.x.x
~2.2.2----->2.2.x

即使安装了ES Lint，也可以在config/index.js中通过设置参数将其关闭

runtime+compiler和runtime-only的比较

runtime+compiler:
template—>ast—>render函数—>virtual dom—>真实DOM
runtime-only:
render函数—>virtual dom—>真实DOM


对比可知：
实际上template—>ast—>render函数的过程就是compiler做的事。coderwhy更推荐使用runtime-only。

//h 代表的是 hyperscript。
//它是 HTML 的一部分，表示的是 超文本标记语言：当我们正在处理一个脚本的时候，在虚拟 DOM 节点中去使用它进行替换已成为一种惯例。
//Hyperscript 它本身表示的是 "生成 HTML 结构的脚本"

//使用createElement
render: function (createElement) {
  return createElement(App);
}

//用 h 代替它
render: function (h) {
  return h(App);
}

//ES6简写
render: h => h (App)

createElement的用法

/*
	*param1:标签,String类型
	*param2:标签的属性,对象类型
	*param3:标签的内容，数组类型
*/
//第一种	简单使用
createElement('h2',{class:'box'},['Hello World']);
//第二种	嵌套使用
createElement(
	'h2',
	{class:'box'},
	createElement('h2',{class:'box'},['Hello World'])
);
//第三种	传入组件对象。比如App(import App from ./App.vue)
createElement(App);

自我理解

当template写在.vue文件中，它在被引用的时候是没有template这些代码了的。实际上是被vue-template-compiler给编译了。就不需要template—>ast—>render函数的过程了。只需要runtime-only就够了。

vue-cli3和2的区别

1.cli3是基于webpack4，cli2是基于webpack3。
2.cli3的设置原则是“0配置”，移除了build和config等目录
3.cli提供了vue ui
4.移除了static文件夹，新增了public文件夹，并且index.html移动到了public中

关于this的作用域的问题

前提：this最后指的就是对象，要么是自己定义的对象，要么是window对象。箭头函数没有自己的作用域，他会引用最近的this。就是一层一层网上找，直到找到为止。
方法和函数是不一样的。
方法是依赖于对象存在的。对象的this指的就是本身。
函数（就是function）是有自己的作用域的，就是window。
总结：箭头函数没有作用域。方法的作用域是依托于对象的。而function函数的作用域就是window对象