Vue 的两个版本Vud 基础知识，内容包括快速创建一个 Vue 项目、Vue 的两个版本、高效使用 Vue 运行时版本

Vud 基础知识，内容包括快速创建一个 Vue 项目、Vue 的两个版本、高效使用 Vue 运行时版本、SEO 优化。

一、快速创建一个 Vue 项目

把 @vue/cli 和 vue 的文档看完就精通了

方式一

yarn global add @vue/cli
vue create vue-demo-1

cd vue-demo-1
yarn server

方式二

在 codesandbox.io 新建 Vue 项目，下载 zip 并解压。

二、Vue 的两个版本

「Vue 完整版」和「Vue 运行时版」

1. 「Vue 运行时版」的使用

完整版可以从 HTML 直接得到视图

<!-- index.html，在 body 标签中添加一个 id 为 app 的 div，并引用 Vue 完整版-->

  <div id="app">{{n}}</div>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</body>

//  src/main.js
new Vue(){
    el:'#app'
    data:{n:0}
}

或者

//  src/main.js
new Vue({
  el: '#app',
  template: `
    <div>{{n}}</div>
  `,
  data: {
    n: 0
  }
})

使用 Vue 完整版，JS 能够直接读懂从 HTML 读取的视图，它中间的过程是这样的，先从 HTML 里读取到字符串，经过一个编译器翻译成 DOM 节点然后渲染。我们写的 HTML 页面有一个编译的过程。

2. 「Vue 运行时版」的使用

<!-- index.html，在 body 标签中添加一个 id 为 app 的 div，并引用 Vue 运行时版-->

<div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>

new Vue({
  el: '#app',
  render(h) {
    return h('div', this.n)
  },
  data: { n: 0 },
})

使用 Vue 运行时版，JS 无法直接读懂 HTML 的视图，这个版本它砍掉了编译的代码，它的过程是这样的，从 HTML 中读取标签，我们手动创建 DOM 节点，然后渲染。这里免去了一个编译的过程。

3. Vue 的两个版本的区别

运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

三、高效使用 Vue 运行时版本

使用运行时版本好处是：在用户面下载的 vue.js 的代码少 30%。

在开发的时候如何用另外一种方式体验到完整版呢？当然是有的，通过引入 vue 文件，使用 vue-loader 即可，这就是 Vue 的单文件组件。我们把把编译过程放到开发这，不放到用户那。

// App.vue

<template>
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return { n: 0 };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>

<style>
.red {
  color: red;
}
</style>

// main.js

import Vue from 'vue'
import App from './App.vue'


new Vue({
  el: '#app',
  render(h) {
    return h(App)
  },
})

四、SEO 优化

SEO 全称是 search engine optimization，搜索引擎最佳化，可以简单地认为搜索引擎在不停地 curl，如果页面是 JS 创建的，那么很可能 curl 不到什么内容。

这时候我们可以在页面中把 title、description、keyword、h1、a 写好，这样搜索引擎就能够收录到啦。