Vue-脚手架-CLI2-CLI3-箭头函数

简介

• CLI是Command-Line Interface,命令行界面，俗称脚手架
• vue cli 是一个官方发布的vue.js项目的脚手架
• 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

使用前提-1.node 2.webpack

webpack依赖于node(npm)
vue.js官方脚手架工具使用了webpack模板，他在开发中提供了一套完整的功能，能够使我们开发过程中变得高效

vue CLI使用

安装脚手架3
终端安装！！！
sudo cnpm install -g @vue/cli
这是vue cli3，如果想要按照vue cli2方式初始化项目时是不可以的
需要拉去cli2模板?

---

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

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

sudo cnpm install -g @vue/cli-init

---

关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli `(1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g `或 yarn global remove vue-cli 卸载它。 

脚手架二初始化项目
vue init webpack my-project
脚手架三初始化项目
vue create 项目名

脚手架2

ESLint : 对ES代码进行限制，暂时先不用
e2e test: => etoe test端到端 -> selectnium
use npm not yarn!

解析目录文件

packge.json

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

node 可以直接执行js文件
node本身是使用c++开发的，核心是V8引擎，谷歌开发的
js->字节码->浏览器，v8引擎：js->二进制代码
使用js开发服务器，摆脱浏览器的运行环境，使用node在服务器上运行。
"build": "node build/build.js"
rm: remove，删除已经打包过的dist的文件夹，再通过webpack进行配置

Runtime-only与Runtime-compiler

区别只在main.js
compiler: 在使用App是，先在Component进行注册，然后在template中进行使用
runtime-only: 不注册, render: h=> h(App) 渲染，箭头函数
相当于：

new Vue({
	el: '#app',
	render: function(h){
		return h(App)
	}
)}

h参数，接受到的实参其实是,createElement('标签(h1)',{标签的属性}, [ 'hello，world'])
最后渲染成<h1>hello,world</h1>

new Vue({
  el: '#app',
  render: function (createElement) {
    //三个参数，'标签',{标签的属性}.[数据]
    return createElement('h2',{class:'box'},['Hello,world',createElement('button',['按钮'])])
  }
})

template -> ast -> render -> virtual dom -> dom ui
使用render函数把App变成虚拟dom

runtime-only 性能更高, 代码量更少,render函数
runtime-compiler

.vue文件中的template是谁处理的呢？
是由vue-template-compiler！！！

脚手架 CLI3

• vue-cli3 是基于webpack4打造， vue-cli2还是webpack3
• vue-cli3设计原则是0配置，移除的配置文件根目录下的build和config等目录
• vue-cli3 提供了 vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

按空格是选中和取消

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

配置文件都看不到了- - !

CLI3配置查看和修改

vue ui

箭头函数

  //const ccc = (参数列表) => {}
  const ccc = ()=>{ alert('1') }
  const sum = (num1,num2) => {return num1+num2}
  //1.放入一个函数,小括号可以省略
  const power = num => {return num*num}
  //2.函数中的代码数量问题
  //函数代码块中只有一行代码,省略大括号和return
  const test = () => {
    console.log('hello,world');
    console.log('hello,vue.js');
  }
  const mul = (num1,num2)=> num1*num2
  console.log(mul(2, 4));
  //执行那一行的函数体后，demo函数的返回值是undefine
  const demo = () => console.log('hello demo')

such as

new Vue({
  render: h => h(App),
}).$mount('#app')

箭头函数this

  const obj = {
    aaa(){
     setTimeout(function () {
        console.log(this) //window
     })
      setTimeout(()=>{
        console.log(this) //obj
      })
    }
  }
  obj.aaa()

箭头函数中的this引用的就是最近作用域中的this
箭头函数是如何查找的？
向外层定义作用域中，一层层查找this，直到有this的定义