Vue是一套用于构建用户界面的渐进式框架，易于上手，使用广泛。这篇博客主要涉及到Vue的安装方法和Vue的两个版本。

一、Vue的安装

1.1 直接通过<script>标签引入

这样可以使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但是对于生产环境，推荐链接到一个明确的版本号和构建文件：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

1.2 NPM

npm install vue—— 最新稳定版。

1.3 命令行工具 @vue/cli

Vue提供了一个官方的cli，创建Vue项目的步骤如下：

• 安装：npm install -g @vue/cli或yarn global add @vue/cli。
• vue --version—— 查看@vue/cli是否安装好了。
• 创建项目：vue create 项目名；此时会被提示选取preset，可以选择默认也可以选择“手动选择特性”。
• 创建项目完毕后：cd 项目路径，再使用yarn serve便可开启预览。

二、Vue的两个版本

Vue有完整版和不完整版两个版本，首先总结：推荐使用Vue不完整版。

2.1 Vue完整版 和 template

Vue的完整版可以从HTML得到视图，内含编译器，可以将Vue的语法翻译成浏览器能看得懂的东西。因此，可以使用template渲染页面，template内写入的内容会成为页面的内容。例如：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>（Vue完整版）

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

缺点：Vue完整版由于编译器代码体积变大。因此为了节省30%的体积，推荐使用Vue不完整版。

2.2 Vue不完整版 和 render()

Vue不完整版是砍掉了编译器的，不能使用template渲染页面。Vue不完整版的页面渲染是通过js文件里的render()函数，配合vue-loader 解析.vue文件实现的。

vue-loader：解析和转换.vue文件。.vue 文件内包含template、script和style。其中template写入HTML的内容；style内写入样式。vue-loader把vue文件里的HTML转为了 h 函数。

举例：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.min.js"></script>（Vue不完整版）

Demo.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 scoped>
.red{
    color:red;
}
</style>

在main.js内

import demo from './Demo.vue'
new window.Vue({
  el:'#app',
  render(h){
    return h(demo)
    }
})

缺点：Vue不完整版可以节省体积，只是这样index.htmL只需要<div id="app"></div>，搜索引擎无法curl到内容，SEO不友好。但只需把title、description、keyword、h1、a写好即可解决此问题。

针对不同版本的解释如下：

三、使用 codesandbox.io写Vue

• 搜索codesandbox，进入官网后创建沙盒（无需登录）。
• 选择 Vue；

• 进入的Vue项目如下：

• 可在File导出项目：