Vue（读音，view）
框架，在1.0之前是MVVM，2.0以后是MVC
Vue3和react非常像
文档：vue，@vue/cli

快速搭建一个vue项目 codesandbox

搭建一个使用vue的项目，本地

工具，@vue/cli
在Google搜索 @vue/cli，进入 cli

安装cli `yarn global add @vue/cli`

创建demo项目 `vue create vue-demo`

以下选项适用当前demo

cli创建好vue工程后会提示， Please pick a preset:
勾选 Manually select features
回车之后会会有提示，Check the features needed for your project
用空格键选中

Babel
CSS Pre-processors // css预处理
Linter / Formatter
Unit Testing

回车之后会提示用户选择vue版本
Choose a version of Vue.js that you want to start the project with
选择 2.x

回车之后会提示选择那种css预处理方式？Pick a CSS pre-processor
选择 Sass/SCSS (with dart-sass)

回车之后提示选择哪种Linter？Pick a linter / formatter config
直接回车（实际选中了 ESLint with error prevention only ）

回车之后提示选择Linter的配置？Pick additional lint features
选择 Lint and fix on commit // 提交时进行语法错误提示

回车之后提示选单元测试方案？Pick a unit testing solution
Jest

回车之后会提示选择配置文件的保存方式？Where do you prefer placing config
In dedicated config files // 分开存放

回车之后提示，是否将配置作为新项目默认值？Save this as a preset for future projects? 默认选择 NO

选择结果

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

创建成功：

$ cd vue-demo
$ yarn serve

执行 yarn serve 开启webpack-dev-server，打开项目！

demo运行测试

App.vue文件的<div id="app">标签，这个标签是显示内容的入口，改动这个标签：

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

App.vue文件的export default提供交互的数据：

export default {
  name: 'App',
  data(){
    return {
      n:0
    }
  },
  methods:{
    add(){
      this.n += 1;
    }
  },
  components: {
    // HelloWorld
  }
}

demo用到的知识点，vue实例

默认的创建方法，main.js

new Vue({
  render: h => h(App),
}).$mount('#app')

手动在main.js中创建vue实例

new Vue({
  el:'#app', // 对index.html中id=app的div进行mvc封装
})

在index.html的id=app的div中使用数据n

<div id="app">
    {{n}}
</div>

报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这个报错是因为，vue的2个版本引起：

完整版的Vue：vue.js

用 cdn 或者npm安装都可以

cdn.bootcss.com/vue/2.6.10/…

完整版引用到项目里，在index.html文件中，

<body>
    ……
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>

引入后可以在main.js打印出来：

console.log(window.Vue)

在main.js中使用

// import Vue from 'vue'
// import App from './App.vue'
// console.log(window.Vue)
new window.Vue({
  el:'#app', // 对index.html中id=app的div进行mvc封装
  data:{
    n:199
  }
})

相当于Vue是一个工具，能自动连接index.html中的视图V和main.js中的数据M

非完整版的Vue：vue.runtime.js

cdn.bootcss.com/vue/2.6.10/…

非完整版引用到项目里，在index.html文件中，

<body>
    ……
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
</body>

引入后可以在main.js打印出来：

console.log(window.Vue)

在main.js中使用

new window.Vue({
  el: '#app', // 对index.html中id=app的div进行mvc封装
  render(h) {
    return h('div', [this.n, createElement('button', {on: {click: this.add}}, '+1')]);
  },
  data: {
    n: 199
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
})

相当于Vue是一个工具，能自动连接index.html中的视图V和main.js中的数据M

非完整版的Vue存在的意义

参考vue.js 和 vue.runtime.js 的使用，
完整版Vue的思路大概理解是这样的：把混杂了{{n}}这种占位符的html视图，转换为真正的html。但是这种转换过程中可能涉及到v-if，v-for等复杂语句，不能简单的文本替换，所以替换过程需要编译器compiler。compiler可以把条件循环和占位符的html语句变为真正的dom节点。
但是这个compiler也是要占用打包空间的。
所以相比于不含有Compiler的runtime版本，这个完整版空间占用更大，体积大30%以上。
那么，不完整版本是怎么处理这种转换的呢？
runtime版本借助webpack，在写代码的时候，利用vue loader把html形式的视图，翻译成函数形式。比如

<div>
 {{n}}<button>+1</button>
<div>

直接翻译成函数

return createElement('div', [this.n, createElement('button', {on: {click: this.add}},

这用，代码在写的时候，是html，但是用户下载的，是函数版本，兼顾了开发效率和软件体积；

Vue单文件组件

myDemo.vue文件：

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

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

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

main.js文件：

import Vue from "vue";

import myDemo from "@/myDemo";
new Vue({
  el:'#app',
  render(h){
    return h(myDemo);
  }
});

Vue网站的SEO友好

SEO友好是指网站对于搜索引起的友好；
搜索引擎得到的html静态页面。但是在Vue网站上，html内容是空的，主要内容是Vue渲染进去的。所以，搜索引起搜索不到有价值的内容。
如何解决？把 title、 description、 keyword、h1、a 写好即可原则: 让 curl 能得到页面的信息，SEO 就能正常工作。

1 Vue2 起手式