视频学习笔记08

视频学习笔记

vue-cli的入门

Vue-cli

开发大型项目，需要使用Vue CLI2
脚手架可以帮助我们完成代码目录结构，项目结构和部署，热加载，代码测试单元等事情
使用vue cli的前提是node和webpack的安装
安装vue cli：npm install -g @vue/cli
这样安装的是Vue cli3的版本，如果想按照vue cli2的方式初始化项目是不可以的，需要拉取旧版本。vue cli3和旧版使用了相同的vue命令，所以vue cli2被覆盖了，如果要使用旧版本的vue init功能，需要全局安装一个桥接工具：npm install -g @vue/cli-init
vue cli2的方式初始化项目:vue init webpack my-project
vue cli3的方式初始化项目:vue create my-project

vue cli2创建过程

初始化项目之后，有问题选项
    1.项目名称文件夹，不能包含大写字母
    2.项目名称，可默认为上面文件夹名称
    3.作者信息，会从git中读取
    4.vue build runtime，可以自行选择
    5.vue-router的安装
    6.ESlint检测代码规范
    7.单元测试
    8.e2e测试，end to end 安装nightwatch，是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架
    9.选择yarn或者npm管理项目的包

如果不想使用eslint：在config文件夹中找到index.js 文件，将useElsint:改成false

runtime-compiler 和 runtime-only

vue的运行过程：
    vm.options.template(模板被保存在vue的options里) -(解析)-> ast(抽象语法树) -(编译)->render(function) render函数 -> 虚拟dom -> ui真实dom

即vue先将模板保存在options里，经过解析成抽象语法树，再经过编译成render函数，render函数生成虚拟dom，最后形成真实的dom对象
runtime-only只需要从render函数处执行，而runtime-compiler需要执行全部过程，由上述过程可以看到runtime-only具有性能更高，需要代码量更少的优点。
那么.vue文件中的template是由谁解析的？
由vue-compiler-template处理成render函数
如果在之后的开发中，依然使用template，就需要选用runtime-compiler
如果使用的是.vue文件夹开发，那么就可以选择runtime-only。

//简单的render函数
  render: function (createElement) {
    // 1.普通用法 createElement('标签', {标签的属性}, ['标签的内容'])
     return createElement('h2', {class: 'box'}, ['hello world'])
     }
     // 2.传入组件对象
    render: function (createElement) {
    return createElement(App)
  }  

箭头函数

    //ES6中的箭头函数 放入一个参数
    const power = (num) => {
        return num * num
    }
    //没有参数情况
     const test = () => {
        console.log('aaa');
    }
    //只有一条执行语句
        const mul = (num1, num2) => num1 * num2