Learning Notes

# 文档初探(五): 版本的区别

我们在引入 Vue 的时候有以下几种方式:

  1. 直接用<script>引入

  2. 用 webpack, parcel 等打包工具引入 vue: npm install vue

  3. 使用 Vue 官方推出的@vue/cli

但是 Vue 提供的版本却不止一种, 我们主要将它分为 runtime build 和 full build 两种.

# 版本的区别

# full build

包含 compiler 和 runtime 的 build

# runtime build

只包含 runtime 的 build

缺少的 compiler 的作用是将原生的 HTML 和模板字符串编译为 JS 渲染函数. 有了它, 我们可以把视图都写在 HTML 文件里面, 也可以使用实例的template来写视图.在缺少 compiler 的 runtime build 里面, 我们要使用单文件组件, 然后通过 vue-loader 进行编译来达到一样的效果.

full build runtime build
script 标签引入 尾缀是 /vue.js 尾缀是/vue.runtime.js
webpack 引入 resolve: { 'vue' : 'vue/dist/vue.js' } 默认版本
@vue/cli runtimeCompiler: true in vue.config.js 默认版本

# template & render

下面是template的写法:

Vue.component("alert-box", {
  template: `
    <div :style="styles">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `,
  data() {
    return {
      styles: {
        border: "red",
        background: "#cc3e44",
        height: "40px",
        width: "100%"
      }
    };
  }
});

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

下面是render的写法:

// alert.vue
<template>
  <div>
    <strong>Error!</strong>
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style>
div {
  border: red;
  background: #cc3e44;
  height: 40px;
  width: 100%;
}
</style>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Alert from "alert.vue";
new Vue({
  render: h => h(Alert)
}).$mount("#app");

  
        Copied!
1
2
3
4

← Vue文档初探(六): 事件处理 →