0-1 Vue (历史、@vue/cli 搭建项目、Vue实例、vue-loader、SEO友好)

• 框架

1.Vue的历史

• View，意为：MVC中的V
• MVC中的V是Vue的重点，M和C则被简化
  主要关心视图
• 版本
  1.2015年，1.0版本——Vue是MVVM框架
  2.2016年，2.0版本——Vue就不是MVVM框架
• 如何学习Vue
  1.用CRM把所有文档过一遍
  2.写一篇博客

2.使用 @vue/cli 搭建项目

• 搞出一个使用Vue的项目

2.1 方法一：使用@vue/cli

• 官方文档
  1.安装：yarn global add @vue/cli(想要具体版本后面@4)
  2.创建文件：vue create vue-demo-1
  3.进入预设：上下切换，空格选中，回车确定，重选ctrl+c
• 预设
  （就是在选webpack有哪些loader）
  1.preset：Manually select features手动选择特性
  2.feature（功能）：Babel、CSS pre-processors（CSS预处理）、单元测试
  3.使用哪种CSS升级版：dart-sass
  4.使用哪个linter：默认
  5.什么时候触发lint：Lint and fix on commit（提交的时候使用lint，提交的时候才提示错在哪，一定要多提交！）
  6.使用什么单元测试：Jest
  7.配置文件是分开放还是放在package.json中：In dedicated config files（推荐分开放，这样bug更少）
  8.是否把之前选项作为未来项目的默认值：N（不同项目需求不同，后面很难改）
  9.使用yarn安装依赖
  10.等待初始化
• 以上选项只适合本次项目，不同项目配置不同
• 创建成功
  cd vue-demo-1：进入目录
  yarn serve：webpack-dev-serve 方便实时预览
  
• 进入文件
  1.start .，把文件vue-demo-1拖进VScode
  2.yarn serve：开一个本地预览服务器
  3.进入local

2.2 方法二：自己从零搭建 Vue 项目

• 使用webpack 或者 rollup 从零开始
• 所有插件都是自己配
  有什么需求配什么loader、插件

3.创建一个简单的项目

• methods（方法）：对象
• data：函数

3.1 Vue实例

• 实例就是对象
• main.js中：new Vue
• 理解：const $div = new jQuery('#xxx')
  1.创建jQuery实例（对象）使用：new jQuery('#xxx')，一般new可以省掉，jQuery可以用$
  2.达到的效果：返回了一个封装对象$div，这个$div封装了对xxxdiv的所有操作
  3.Vue实例一模一样
• const vm = new Vue
  vm封装了对这个实例的所有操作（包括：更新、组件绑定等）

3.2 如何使用Vue实例

3.2.1 方法一：从HTML得到视图

1. 官方文档：把alias去掉
2. 也就是文档里说的[完整版 Vue]
3. 从BootCDN引用 vue.js 或 vue.min.js（无注释版本） 的srcipt标签
4. 引入之后就会得到一个全局变量：window.Vue
5. index.html中写一个占位符，从main.js中就可以直接拿到这个元素
   （或者不用占位符，使用 template）
6. 完整版功能：只要是从HTML变成页面中的东西，完整版就支持

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

new Vue({
     
  el:'#app',//元素直接从HTML里面拿
  data:{
     
    // data可以是函数也可以是对象
    n:0
  }
})

8. template

new Vue({
     
  el:'#app',//元素直接从HTML里面拿
  template:`
    
{
      {n}}
  `
  data:{
     
    // data可以是函数也可以是对象
    n:0
  }
})

3.2.2 方法二：用JS构建视图

1. 使用vue.runtime.js[不完整版]
2. 还是得到一个Vue，但不支持从HTML里面获取视图
3. 因此必须要用createElement的方式把所有的元素构造出来
4. 看上去很不方便，但实际上是对的

new Vue({
     
  el:'#app',//元素直接从HTML里面拿
  render(createElement){
     //vue传过来的参数
    const h = createElement
    return h('div',[this.n,h('button',{
     on:{
     click:this.add}},'+1')])
  },
  data:{
     
    // data可以是函数也可以是对象
    n:0
  },
  methods:{
     
    add(){
     
      this.n += 1
    }
  }
})

3.2.3 方法三：使用vue-loader

• Vue 单文件组件
• 可以把.vue文件翻译成h构造方法
  就不用用户自己去写了，只需要用Vue，打包的时候就自动翻译好了
• 新建：src/Demo.vue
• 文件内容：
  1.视图：