vue.js

  • 完整版，同时包含编译器（compiler）和运行时的版本。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码

  • 可以在客户端编译模板，即可以传字符串给 template，或挂载在 public/index.html 文件里的元素上

    1. // 需要编译器
    2. new Vue ({
    3.     template: '<div>{{ hi }}</div>'
    4. })

    vue.runtime.js

  • 运行版，不包含编译器

  • 比完整版体积小 30%

  • 由于没有编译器，所以不能直接把字符串传给 template，只能使用函数返回

    1. // 没有编译器
    2. new Vue({
    3.   render(h){
    4.       return h('div', this.hi)
    5.   }
    6. })

  • 最好的选择是使用 vue.runtime.js + vue-loader， webpack 的vue-loader 会 在构建时将*.vue 文件内部的template预编译成 JavaScript，步骤：

    1. 将内容写在 Demo.vue 组件里 ```vue 

  2.    1. 在 main.js 里 import 组件并渲染
  3. ```javascript
  4. import Vue from 'vue'
  5. import Demo from './Demo.vue'
  7. Vue.config.productionTip = false
  9. new Vue({
  10.   render: h => h(Demo),
  11. }).$mount('#app')

问题：由于页面都是由 JS 创建的， public/index.html 里的内容为空，SEO（搜索引擎优化）不友好

解决办法：把关键信息写好，即把 title、description、keyword、h1、a 写好，让搜索引擎能 curl 到页面信息

  1. <head>
  2.     <title>标题</title>
  3.     <meta name="keyword" value="关键词">
  4.     <meto name="description" value="描述"></meto>
  5. </head>
  6. <body>
  7.     <h1>
  8.         标题
  9.     </h1>
  10.     <a href="#">详情</a>
  11. </body>