Vue 的两个版本

vue 的两个版本

• 完整版
• 非完整版（运行时版）

BootCDN 引入

完整版：

//有注释版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.6/vue.global.js"></script>
//.min.js 为无注释版，体积小
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.6/vue.global.min.js"></script>

非完整版：

//有注释版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.6/vue.runtime.global.js"></script>
//.min.js 为无注释版，体积小
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.6/vue.runtime.global.min.js"></script>

两版本区别

• 完整版：同时包含 compiler（编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码）和运行时的版本，但体积会比非完整版大30%左右。
• 非完整版（运行时版）：就是除去 compiler（编译器）的其它一切，对比完整版少一个 compiler（编译器）

代码例子：

//使用完整版
new Vue({
  el: "#app",
  template: `
    <div @click="add">{{n}} <button>+1</button></div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

完整版包含 compiler 可以转译为渲染函数的代码，所以视图部分可以直接写进 HTML 或 template 中。

代码例子：

// 使用非完整版
new Vue({
  el: "#app",
  render(h){
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

非完整版没有 compiler ，只能将视图写入 render 函数中，但是可以通过webpack的Vue-loader转化成类似h('div', this.hi)这种形式，而且不完整版的Vue更加独立，代码体积也会比完整版的少30%左右。

总结：

平时最好默认使用代码体积小的非完整版，编译的工作交给 vue-loader 去做

1. 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数
2. 保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数
3. 简化操作流程， vue-loader 会把 vue 文件里的 HTML 转为 h 函数,这样我们就不需要写太多麻烦的 h 函数就可做到和完整版一样的事

另外的引入方法

• webpack 引入：默认使用非完整版，使用完整版需要配置 alias

• @vue/cli 引入：默认使用非完整版，使用完整版也需要额外配置

如何创建 Vue 项目

@vue/cli 创建

1. 安装 @vue/cli

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

2. 检查版本

$ vue --version

3. 创建一个新项目

$ vue create vue-demo-1

你会被提示选取一个 preset。你可以选 default 默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选 Manually 手动选择特性来选取需要的特性。

4. 打开项目

//win
$ start .
//Mac
$ open .

5. 启动项目

$ npm run serve
# OR
$ yarn serve

codesandbox 快速创建

1. 用 codesandbox 创建一个 vue 项目

2. 导出项目压缩包