vue-vue cli

vue cli - 脚手架
脚手架创建项目的目录
node的一些介绍
12-27
eslint的使用演示
runtimecompiler 和 runtimeonly的区别
render
vue cli 3
箭头函数

vue cli - 脚手架

npm install -g @vue/cli ===> 安装脚手架3的命令
npm install -g vue ===> 安装脚手架2的命令
npm install -g @vue/cli-init ===> 在脚手架3拉取脚手架2的模板
vue init webpack my-project：vue cli2初始化项目的命令
vue create my-project: vue cli2初始化项目的命令
vue全家桶: vue-core + vue-router + vuex
(了解)e2e - nightwatch - selenium python代码自动操作浏览器
公司测试人员，高级的测试，自动写一个测试。谷歌很多测试工程师比开发工程师，工资都高。
Yarn，是一个类似npm的工具，因为npm一开始的时候是很不好用的。

脚手架创建项目的目录

build - webpack配置
conf - webpack配置 prod dev index

node的一些介绍

执行js代码，写了index.js，又要写个index.html，也要有浏览器。
有了node之后，写了index.js，就可以在node环境当中执行。
node本身是使用C++开发的。里面核心的东西是V8引擎。
chrome里面有V8引擎。
默认情况下，JS代码会生产字节码，字节码跑到浏览器解析
V8引擎，JS代码直接转换成为二进制代码。
火狐浏览器都是借鉴V8引擎的，差别并不是太大。
V8引擎本身是开源的。
node核心是V8引擎。
有了node，服务器上执行js代码就很棒。

12-27

eslint的使用演示

vue init webpack runtimecompiler 创建一个使用运行+编译的项目
vue init webpack runtimeonly 创建一个运行时项目
如果安装脚手架过程中有小错误

npm clean cache -force
c:/users/administrator/appdata/roaming/npm-cache

runtimecompiler项目中npm run dev启动一下。
eslint是如何限制我们的代码的。
如果我们在初始化我们的项目的时候，选择了eslint，但是又不想用了怎么办。
config - index.js - useEslint的true改成false

runtimecompiler 和 runtimeonly的区别

区别只在main.js
runtimecompiler：注册组件，template当中使用
runtimeonly: render: h => h(App)

template传入到我们的vue实例当中的时候，会在vm.options.template当中保存。
然后解析成为parse成为ast abstract syntax tree 抽象语法树，
然后将抽象语法树编译compile成为render(functions)，
通过render函数将template翻译成为虚拟DOM virtual dom
将virtual Dom转变成为真实DOM
runtimecompiler: template - ast - render - vdom - ui
runtimeonly: render - vdom - ui
比较结论：runtimeonly性能更高，需要vue代码更少小6kb。
后面都是选择runtimeonly。

render

render:function (createElement){
	// 1. createElement('标签'，{标签的属性}，['标签当中的内容'])
	//return createElement('h2',{class:'box'},['hello world'])
	return createElement('h2',
		{class:'box'},
		['hello world'],createElement('button',['按钮']))
	// <h2 class='box'>hello world</h2>
	
	
	// 2. createElement当中也可以传入一个组件对象。
	return createElement(cpn)
}

.vue文件当中的template是由谁处理的呢？是由vue-template-compiler
所以main.js当中没有template。
所以vue文件当中编译后，经过vue-template-compiler成对象后，里面也没有template了。

vue cli 3

vue2.x - flow-type - facebook
vue3.x - typescript - microsoft
vue-cli3 2018.8.11发布。
vue-cli3与2版本有很大区别，主要是0配置。build、config文件夹没有了
vue-cli3还拥有可视化配置界面
vue-cli3移除了static文件夹，增加了public文件夹。
progressive web app pwa support，以前app本地存储session storage，效率低有限。
pwa这种app是可以存储很多东西，还有推送通知。progressive web app还没有推动起来。
c:/users/administrator/.vuerc，删除你自定义保存的preset
为什么配置文件后缀名叫做rc，run command，终端的配置文件。
vue ui
vue cli3的配置文件去哪里了。
node_modules/@vue/cli-service/webpack.config.js
如果想要修改配置，就创建固定的vue.config.js，项目更目录。
git commit - m '添加一个配置文件'

module.exports = {
}

git add . / git status / git commit -m ''

箭头函数

以前定义函数的方式：

const app = function (){}

这是第一种方式。

还有第二种方式，是在对象的字面量当中，是有增强写法的。

const obj = {
data(){
}
}

这是对象字面量当中，定义函数的增强写法。

ES6当中还有第三种的定义函数的方式，就是箭头函数。

const sum = (num1,num2) => {
return num1 + num2
}

这里有一个特例，就是一个参数的手，()可以省略。

const power = num => {
return num * num
}

函数代码块当中只有一行代码

const mul = (num1,num2) => num1 * num2

const demo = () => console.log('hello world')

const demo1 = h => h(App)

什么时候使用箭头函数？

将一个函数作为参数传入到一个函数当中的时候，

这种场景下面，使用箭头函数是比较多的。

setTimeOut(() => {

},1000)

stack over flow当中讨论了很多this。

箭头函数当中的this是如何查找的呢？

它是向外层作用域当中一层层查找的this，直到有this的定义。