浅析 Vue

1. Vue

Vue 是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. Vue 的两个版本

Vue 有两个不同的版本，一个是完整版，另一个是非完整版。完整版同时包含编译器和非完整版，非完整版则不包含编译器。

编译器是用来将模板字符串编译为 JavaScript 渲染函数的代码。

非完整版包含除编译器外的其他一切，例如用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。

完整版的视图是写在 HTML 里面或者写在 template 选项中。非完整版是写在 render 函数中，用 h 来创建标签。如下所示。

// 完整版使用 template
new Vue({
    template: `<div>{{ hi }}</div>`
})
// 非完整版使用 render
new Vue({
    render(h){
        return h('div', this.hi)
    }
})

从语法上来看完整版时更加简单的，那为什么还会有非完整版。

非完整版的体积要比完整版的体积小大约 30%，所以我们应该尽量使用非完整版，减少代码的体积。

3. Vue 的两个版本的引入方法

1. cdn 引入

使用 cdn 引入 Vue 时，完整版与非完整版的后缀是不同的。完整版的后缀是 vue.js，非完整版是 vue.runtime.js 即运行时版本。

在生产环境时我们使用的是去掉了注释的版本，完整版和非完整版都有各自的生产环境版本，生产环境版本的后缀分别为 vue.min.js 和 vue.runtime.min.js。

我们可以从 BootCDN 上寻找自己想要的 Vue 版本，例如完整版和非完整的引入方式为：

// cdn 引入完整版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
// cdn 引入非完整版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.js"></script>

2. webpack 引入

Vue 在 webpack 中默认使用非完整版，如果要使用完整版，需要在 webpack 中配置一个别名。

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

3. @vue/cli 引入

Vue 在 @vue/cli 中也是默认使用非完整版,如果要使用完整版需要自己进行额外的配置。

使用 @vue/cli 需要使用 npm 或 yarn 下载 @vue/cli 的包。

npm install -g @vue/cli
//或者
yarn global add @vue/cli
// 出现版本号说明安装成功
vue --version

4. 使用 codesandbox 来写 Vue

如果你觉得上面的方式太麻烦了，那么你可以直接在 codesanbox 中写 Vue 的代码。

进入 codesanbox 后点击 Vue 后你就会进入编辑代码的页面，在这个页面中你就可以直接写 Vue 了。

写完代码后点击左上角的 File -> Export to ZIP，你的代码就会以压缩包的形式导出。