vue入门—— vue CLI脚手架

1， vue CLI脚手架安装

使用Vue.js开发大型应用时，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

安装Vue脚手架： npm install -g @vue/cli
Vue CLI2初始化项目 ： vue init webpack my-project
Vue CLI3初始化项目： vue create my-project

2，Runtime-Compiler和Runtime-only的区别

参考博客1
参考博客2

// Runtime+Compiler版本
new Vue({
       
  el: '#app',
  components: {
        App },
  template: ''
})

// Runtime-only版本  set in webpack.base.conf with an alias.
new Vue({
       
  el: '#app',
  render: h => h(App)
})

runtime-only：将template在打包的时候，就已经编译为render函数
runtime-compiler：在运行的时候才去编译template

发布生产的时候，runtime-only构建的项目代码体积更小，运行速度更快
推荐使用runtime-only函数

3，Vue程序源码运行过程解析

vue 源码运行流程解析

内部基础对象

• Observer: 用来深度遍历 model对象 ，对内部的每一个key用Object.defineProperty 函数对getter，setter 进行劫持

• Dep: 初始化vue实例时，Observer劫持model 每个key的getter，setter函数时，会为每一个key值都创建Dep对象，Dep对象内部有数组去存储watcher。

• Wathcer ： 当model数据变动时，触发对应的key的Dep.notify(), Dep.notity触发dep内部所有watcher的watcher.update()事件

//name属性对应一个dep对象，dep内部一个数组保存着收集的 wather
name -- {
        dep : [ watcher ] } 
-------------------------------------------------------------------------
数据驱动页面 的事件流程
1.name 值变更 
2.name的setter 函数执行
3.name对应的dep触发dep.notify()
4.dep内部所有watcher 触发wather.update() ： 1.页面更新  2.computed选项属性更新  3.wath选项属性更新

组件的渲染过程
　template —> ast 抽象语法树—> render —> vDom (虚拟DOM)—> 真实的Dom —> 页面

4，render函数的使用

vue通过 template 来创建你的 HTML。但是此时，需要用render来创建HTML。
render方法的实质就是生成template模板：通过render方法的参数传递给他的；

createElement ： 当使用render函数描述虚拟DOM时， createElement是构建虚拟DOM所需要的工具。

//  main.js 脚本文件：

const cpn = {
         
   template: '
{
         {message}}
',
   data() {
          return {
            message: '我是组件message' } }
 }

new Vue({
         
  el: '#app',
  render: function (createElement) {
         
    // 1.方法一：普通用法: createElement('标签', {标签的属性}, [''])
    // return createElement('h2',  {class: 'box'},
    //  		 ['Hello World', createElement('button', ['按钮'])])

    // 2.方法二： 传入组件对象:
    return createElement(App)
  }
})

5， run dev和npm run build

package.json里面
“dev” : “node build/dev-server.js”,
“build” : “node build/build.js”,

npm run build

构建环境下的配置，build.js主要完成下面几件事：
loading动画；删除创建目标文件夹；webpack编译；输出信息

npm run dev

• npm run dev 执行的文件build/dev-server.js文件，执行了：
  检查node和npm的版本
  引入相关插件和配置
  创建express服务器和webpack编译器
  配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
  挂载代理服务和中间件
  配置静态资源
  启动服务器监听特定端口（8080）
  自动打开浏览器并打开特定网址（localhost:8080）

dev-server依赖的webpack配置是webpack.dev.conf.js文件，webpack.dev.conf.js中又引用了webpack.base.conf.js
测试环境下使用的是webpack.prod.conf.js

webpack.base.conf.js主要完成了下面这些事情：
1，配置webpack编译入口
2， 配置webpack输出路径和命名规则
3， 配置模块resolve规则
4，配置不同类型模块的处理规则

6，Vue CLI3

• vue-cli 3 与 2 版本有很大区别
  vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的build和config等目录
  vue-cli 3 提供了可视化配置 : vue ui 命令，
  移除了static文件夹，新增了public文件夹，并且index.html移动到public中