目标1：如何快速搭建出一个VUE项目

常见的搭建方法有两种

使用@Vue/cli
使用webpack或者rollup，从零开始搭建Vue。（适合使用Vue半年以上老手）
使用codesandbox.io

使用@Vue/cli搭建 vue 项目

什么是@Vue/cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

安装@Vue/cli

第一步：全局安装

yarn global add @vue/cli

第二步：创建目录

vue create 路径

第三步：选择配置

👆白色为选项，蓝色为选择的值

第四步：开启服务

cd 目录
yarn serve

第五步：用webStorm或VSCode打开项目开始干活

使用CodeSanbox

直接新建Vue项目，直接开干，需要在本地跑时，可以到处压缩包，本地打开。

目标2：做一个最简单的项目 +1 demo

//修改自动创建项目的App.vue文件，就能实现+1 demo
<template>
  <div id="app">
    {{n}}
    <button @click="add"> +1 </button>
  </div>
</template>
<script>

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

//main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

//这里创建一个Vue实例
//这个实例包含了对内容的所有操作，包括数据、事件绑定、更新等等的各种方法。
new Vue({
  render: h => h(App)
}).$mount("#app");

以上的app.vue就是Vue的单文件组件，通过vue实例中的render函数，直接对单文件中的所有内容进行渲染，超方便。

那么这个实例究竟是如何被创建的？实例中又包含什么呢？

Vue实例

var vm = new Vue({
  // 选项
})

三种方法使用Vue实例

从HTML得到视图
用JS构建视图
使用vue-loader

从HTML得到视图

也就是文档里说的【完整版Vue】，从CDM引用 vue.js 或 vue.min.js 即可做到，也可以通过 import 引用 vue.js 或 vue.min.js

用JS构建视图

【非完整版】，使用 vue.runtime.js ，这种方法看起来没有第一种方便，但是应该采用这种。因为完整版之所以能从HTML得到视图，是因为内置了编译器，所以完整版会比非完整版大40%左右，为了减少用户加载，所以应该用非完整版。但是非完整版不方便，怎么办？所以有了第三种方法。

两个版本的区别👇 使用vue-loader

程序员在写程序时，用完整版写法，但是build的时候，通过vue-loader，编译成JS构建视图的代码，然后用户使用更小的vue.runtime.js使用，就达成了双赢。程序员写得更方便了，用户加载也少了。

是否有编译器的代码区别👇

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

使用vue-loader的缺点

因为Vue的用的是单文件（vue.app），在原本的html文件中body中没有内容，这不利于SEO。SEO可以认为是搜索引擎不段的curl网站。如何解决呢？把title、description、keyword、h1、a写好，让curl得到页面的信息。

【21】初识 Vue