Github 源码：https://github.com/OYCodeSite/VueCode.git

vue 环境搭建

一、初始化项目

生成 package.json

1	yarn init -y

创建入口 js: src/index.js

1 2	console.log('Hello Webpack!') document.getElementById('root').innerHTML = '<h1>Hello222</h1>'

创建页面文件: index.html

1	<div id="root"></div>

二、webpack 基本使用

下载依赖包

1 2	yarn add -D webpack webpack-cli yarn add -D html-webpack-plugin

创建 webpack 配置: webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 模式: 生产环境
  mode: 'production',
  // 入口
  entry: {
    app: path.resolve(__dirname, 'src/index.js')
  },
  // 出口(打包生成js)
  output: {
    filename: 'static/js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 模块加载器
  module: {
    rules: [

    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html'
    })
  ]
}

生成环境打包并运行

1
2
3

配置打包命令:  "build": "webpack --mode production"
打包项目: yarn build
运行打包项目: serve dist

三、开发环境运行

现在的问题

1	每次修改项目代码后, 必须重新打包, 重新运行

下载依赖包

1	yarn add -D webpack-dev-server

配置开发服务器

1
2
3

devServer: { open: true, ? // 自动打开浏览器
      quiet
    : true, // 不做太多日志输出 }

配置开启 source-map 调试

1	devtool: "cheap-module-eval-source-map"

开发环境运行

1 2	配置命令: "dev": "webpack-dev-server --mode development" 执行命令: yarn dev

四、打包处理 ES6/CSS/图片

处理 ES6

a. 下载依赖包
	yarn add -D babel-loader @babel/core @babel/preset-env
b. 配置
{
        test: /\.js$/,
        //exclude: /(node_modules|bower_components)/,
        include: path.resolve(__dirname, 'src'),
        use: {
            loader: 'babel-loader',
            options: {
            presets: ['@babel/preset-env']
		}
	}
}

处理 CSS

a. 下载依赖包
    yarn add -D css-loader style-loader
b. 配置
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'], // 多个loader从右到左处理
}

处理图片

a. 下载依赖包
       yarn add -D url-loader@2.3.0 file-loader@4.3.0
b. 配置
{
	test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
	loader: 'url-loader',
	options: {
		limit: 1000,
		name: 'static/img/[name].[hash:7].[ext]' // 相对于output.path
	}
}

测试

a. 添加图片: src/assets/imgs/logo.png
b. 添加css: src/assets/css/my.css
img {
	width: 200px;
	height: 200px;
}
c. index.js
import logo from './assets/imgs/logo.png'
import  './assets/css/my.css'

const image = new Image()
image.src = logo
document.body.appendChild(image)
document.getElementById('root').innerHTML = '<h1>Hello222</h1>'

五、搭建 vue 的环境

1). 文档:
    https://vue-loader.vuejs.org/zh/

2). 下载依赖包:
    yarn add vue
    yarn add -D vue-loader vue-template-compiler

3). 配置
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    {
      test: /\.vue$/,
      include: path.resolve(__dirname, 'src'),
      loader: 'vue-loader'
    }

    {
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader'],
    }

    new VueLoaderPlugin()

    // 引入模块的解析
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 可以省略的后缀名
      alias: { // 路径别名(简写方式)
        'vue$': 'vue/dist/vue.esm.js',  // 表示精准匹配
      }
    }

4). 编码:
    src/App.vue
    src/index.js

六、解决开发环境 ajax 请求跨域问题

利用 webpack-dev-server 进行请求代理转发

1	webpack-dev-server内部利用http-proxy-middle包对特定请求进行转发操作

配置:

devServer: {
    proxy: {
        // 处理以/api开头路径的请求
        // '/api': 'http://localhost:4000'
        '/api': {
            target: 'http://localhost:4000', // 转发的目标地址
            pathRewrite: {
                '^/api' : ''  // 转发请求时去除路径前面的/api
            },
            changeOrigin: true, // 支持跨域
        }
    }
}

1). 利用webpack-dev-server进行请求代理转发
    webpack-dev-server内部利用http-proxy-middle包对特定请求进行转发操作
2). 配置:
    devServer: {
      proxy: {
        // 处理以/api开头路径的请求
        // '/api': 'http://localhost:4000'
        '/api': {
          target: 'http://localhost:4000', // 转发的目标地址
          pathRewrite: {
            '^/api' : ''  // 转发请求时去除路径前面的/api
          },
          changeOrigin: true, // 支持跨域
        }
      }
    }

七、配置 async/await 的编译环境

下载包

1	yarn add @babel/runtime-corejs2

配置

presets: [
   ['@babel/preset-env', {
       useBuiltIns: 'usage',
       'corejs': 2 // 处理一些新语法的实现
   }]
]

八、解决 mint-ui 按需引入配置异常的问题

文档上的配置

"plugins": [
    ["component", [
        {
            "libraryName": "mint-ui",
            "style": true
        }
    ]]
]

异常信息

1	Error: .plugins[0][1] must be an object, false, or undefined

原因

1 2	文档编写时, 是根据老的babel版本编写的, 新版本的babel配置有变化以前是数组, 现在只能是对象

修正

"plugins": [
    ["component", {
        "libraryName": "mint-ui",
        "style": true
    }]
]

九、解决 history 模式路由请求 404 的问题

1 2	devServer: historyApiFallback: true, // 任意的 404 响应都被替代为 index.html output: publicPath: '/', // 引入打包的文件时路径以/开头

vue 组件化

一、vue 单文件组件

<template>
  <div>xxx</div>
</template>
<script>
export default {
  props: []/{}
  data(){},
  computed: {}
  methods: {},
  watch: {}
  filters: {}
  directives: {}
  components: {}
}
</script>
<style scoped></style>

二、组件化编码的基本流程

拆分界面, 抽取组件
编写静态组件
编写动态组件
- 初始化数据, 动态显示初始化界面
- 实现与用户交互功能
设计 data
类型: [{id: 1, title: ‘xxx’, completed: false}]
名称: todos
位置: 如果只是哪个组件用, 交给它, 如果是哪些组件用, 交给共同的父组件
关于状态数据的更新
data 数据定义在哪个组件, 更新数据的行为就定义在哪个组件
如果子组件要更新父组件的数据, 调用父组件的更新函数来更新父组件的数据
一个组件接收属性数据不要直接修改, 只是用来读取显示的

三、组件间通信

组件通信的 5 种方式

props
vue 的自定义事件
全局事件总线
slot
vuex

props

父子组件间通信的基本方式
属性值的2大类型:
    一般/非函数: 父组件-->子组件
    函数: 子组件-->父组件
问题:
    隔层组件间传递: 必须逐层传递(麻烦)
    兄弟组件间: 必须借助父组件(麻烦)

vue 自定义事件

给子组件标签绑定事件监听
子组件向父组件的通信方式
功能类似于 function props
不适合隔层组件和兄弟组件间的通信

全局事件总线

利用 vm 对象的$on()/$emit()/$off()
利用 vm 对象是组件对象的原型对象
创建 vm 对象作为全局事件总线对象保存到 Vue 的原型对象上, 所有的组件对象都可以直接可见:
- Vue.prototype.$bus = new Vue()
- 任意组件 A 可以通过 this.$bus.$on()绑定监听接收数据
- 任意组件 B 可以通过 this.$bus.$emit()分发事件, 传递数据

slot

父组件向子组件通信
通信是带数据的标签

注意: ==标签是在父组件中解析==

vuex

多组件共享状态(数据的管理)
组件间的关系也没有限制
功能比事件总线强大, 更适用于 vue 项目

vue 单文件组件

<template>
  <div>xxx</div>
</template>
<script>
export default {
  props: []/{}
  data(){},
  computed: {}
  methods: {},
  watch: {}
  filters: {}
  directives: {}
  components: {}
}
</script>
<style scoped></style>

vue-ajax

一、vue 项目中常用的 2 个 ajax 库

vue-resource
vue 插件，非官方库， vue1.x 使用广泛
在线文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
axios
通用的 ajax 请求库，官方推荐， vue2.x 使用广泛
在线文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

安装插件：

// yarn 安装
yarn add vue-resource axios


// nmp 安装
npm install vue-resource --save
npm install axios --save

二、vue-resource、axios 的使用

案例效果

vue-resource:

编码：

index.js

import Vue from "vue";
import VueResource from "vue-resource";
import APP from "./APP.vue"; // 引入自定义组件

Vue.config.productionTip = false;

// 声明使用Vue插件
Vue.use(VueResource); // 内部给所有的组件对象都添加一个属性对象: $http

new Vue({
  el: "#root",
  render: (h) => h(APP),
});

APP.vue

<template>
  <div>
    <p v-if="!repoName">loading...</p>
    <p v-else>
      most star repo is
      <a :href="repoUrl">{{ repoName }}</a>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
    data(){
        return{
            repoName : '',
            repoUrl: ''
        }
    },
  mounted(){
      // 利用vue-resource发送ajax请求获取数据
      this.$http.get('https://api.github.com/search/repositories?q=v&sort=stars')
      .then(response =>{
          const result = response.data;
          const {name,html_url} = result.items[0];
          this.repoName = name;
          this.repoUrl = html_url;
      })
      .catch(error =>{
          alert('请求出错了');
      });
  },


}
</script>

axios

index.js

import Vue from "vue";
import APP from "./APP.vue"; // 引入自定义组件

Vue.config.productionTip = false;

new Vue({
  el: "#root",
  render: (h) => h(APP),
});

APP.vue

<template>
  <div>
    <p v-if="!repoName">loading...</p>
    <p v-else>
      most star repo is
      <a :href="repoUrl">{{ repoName }}</a>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios'
  export default {
      data(){
          return{
              repoName : '',
              repoUrl: ''
          }
      },
    mounted(){
        // 利用axious 发送ajax 请求获取数据
        axios.get('https://api.github.com/search/repositories',{
            params: {
                q : 'v',
                sort: 'stars'
            }
        })
        .then(response =>{
            const result = response.data;
            const {name, html_url} = result.items[0];
            this.repoName = name;
            this.repoUrl = html_url;
        })
        .catch(error =>{
            alert('请求出错了');
        })
    },


  }
</script>

三、使用 express 快速搭建后台接口

编码：

server.js

/*
    后台服务器应用模块： 使用express快速搭建后台路由
 */

const express = require("express");
const axios = require("axios");
const app = express();

// 注册后台路由（转发请求）
app.get("/repositories/:q", (rep, res) => {
  const q = rep.params.q;
  axios({
    method: "GET",
    url: "https://api.github.com/search/repositories",
    params: {
      q,
      sort: "stars",
    },
  }).then((response) => {
    const { name, html_url } = response.data.items[0];
    res.send({
      status: 0,
      data: { name, html_url },
    });
  });
});

app.listen("4000", () => {
  console.log("server listen on http://localhost:4000");
});

测试：

启动 express: node server.js

http://localhost:4000/repositories/v

vuex

一、vuex 的核心概念

1、state

1	vuex管理的状态对象它应该是唯一的 const state = { xxx: initValue }

2、mutations

1
2
3

包含多个直接更新state的方法(回调函数)的对象 谁来触发:
action中的commit('mutation名称') 只能包含同步的代码, 不能写异步代码 const
mutations = { yyy (state, {data1}) { // 更新state的某个属性 } }

3、actions

包含多个事件回调函数的对象 通过执行: commit()来触发mutation的调用, 间接更新state
谁来触发: 组件中: $store.dispatch('action名称', data1) // 'zzz'
可以包含异步代码(定时器, ajax) const actions = { zzz ({commit, state}, data1) {
commit('yyy', {data1}) } }

4、getters

1 2	包含多个计算属性(getter)的对象谁来读取: 组件中: $store.getters.xxx const getters = { mmm (state) { return ... } }

5、modules

包含多个module的对象
一个module是一个包含state/mutations/actions/getters的对象
是将一复杂应用的vuex代码进行多模块拆分的第2种方式

6、store

vuex的核心管理对象, 是组件与vuex通信的中间人
读取数据的属性
    state: 包含最新状态数据的对象
    getters: 包含getter计算属性的对象
更新数据的方法
    dispatch(): 分发调用action
    commit(): 提交调用mutation

二、使用 vuex

1. 创建并向外暴露 store 对象

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    a,
    b
  }
})

2. 注册 store: main.js

import store from './store'
new Vue({
  store
})

3. 组件中通过 store 与 vuex 通信

import {mapState, mapGetters} from 'vuex'
export default {
  computed: (
    ...mapState(['xxx']),
    ...mapGetters(['yyy'])
  )
  methods: {
        test () {
            this.$store.dispatch('zzz', data)
            this.$store.commit('zzz', data)
        }
  }
}

三、 Vuex 结构图

Vue-router

一、vue-router 的基本使用

1). 创建路由器: router/index.js
    new VueRouter({
      mode: 'hash/history'
      routes: [
        { // 一般路由
          path: '/about',
          component: About
        },
        { // 自动跳转路由
          path: '/',
          redirect: '/about'
        }
      ]
    })
2). 注册路由器: main.js
    import router from './router'
    new Vue({
      router
    })
3). 使用路由组件标签:
    <router-link to="/xxx">Go to XXX</router-link>  // 可以不使用
    <router-view></router-view>  // 必须使用
4). 2个对象
    $router: 代表路由器对象, 包含一些实现路由跳转/导航的方法: push()/replace()/back()
    $route: 代表当前路由对象, 包含一些路由相关的属性: path/params/query/meta

二、编写路由的 3 步

定义路由组件
映射路由
使用显示当前路由组件

三、嵌套路由

children: [
    {
      path: '/home/news/:id/:title',
      component: news
    },
    {
      path: 'message',
      component: message
    }
]

四、向路由组件传递数据

params/query: <router-link to="/home/news/123/abc?zzz=1234">
将请求参数映射成props: props=true | props: route => ({id: route.params.id})
变相props: <router-view msg='abc'>

五、动态路由与路由别名

注册路由:
    {
        name: 'news'
        path: '/home/news/:id/:title',
        component: News
    }
跳转:
    <router-link to="{name: 'news', params: {id: 1, title: 'abc'}}">
    router.push({name: 'news', params: {id: 1, title: 'abc'}})

六、缓存路由组件

路由组件对象默认的生命周期: 被切换时就会死亡, 切换回来时重新创建
<keep-alive exlude="A,B">
  <router-view></router-view>
</keep-alive>

七、路由的编程式导航

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由

八、路由的 2 种模式比较, 解决 history 模式 404 问题

hash模式:
    路径中带#: http://localhost:8080/#/home/news
    发请求的路径: http://localhost:8080  项目根路径
    响应: 返回的总是index页面  ==> path部分(/home/news)被解析为前台路由路径

history模式:
    路径中不带#: http://localhost:8080/home/news
    发请求的路径: http://localhost:8080/home/news
    响应: 404错误
    希望: 如果没有对应的资源, 返回index页面, path部分(/home/news)被解析为前台路由路径
    解决: 添加配置
        devServer: historyApiFallback: true, // 任意的 404 响应都被替代为 index.html
        output: publicPath: '/', // 引入打包的文件时路径以/开头

Vue 源码分析

一、debug 调试

调试的目的
查找 bug: 不断缩小可疑代码的范围
查看程序的运行流程(用于熟悉新接手项目的代码)
如何开启调试模式
添加 debugger 语句: 程序运行前此方式用打包后才运行的项目
添加(打)断点: 程序运行前或者过程中此方式用运行源码 js
如何进行调试操作
resume: 恢复程序执行(可能执行完或者进入下一个断点处)
step over: 单步跳转, 尝试执行完当前语句, 进入下一条(如果内部有断点, 自动进入内部断点处)
step into: 跳入, 进入当前调用函数内部
step out: 跳出, 一次性执行完当前函数后面所有语句,并出去
deactivate breakpoints: 使所有断点暂时失效
call stack: 显示是程序函数调用的过程
scope: 当前执行环境对应的作用域中包含的变量数据
breakpoints: 断点列表

二、准备

[].slice.call(lis): 将伪数组转换为真数组
node.nodeType: 得到节点类型
Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)
1. configurable: true/false 是否可以重新 define
2. enumerable: true/false 是否可以枚举(for..in / keys())
3. value: 指定初始值
4. writable: true/false value 是否可以修改存取(访问)描述符
5. get: 函数, 用来得到当前属性值
6. set: 函数, 用来监视当前属性值的变化
Object.keys(obj): 得到对象自身可枚举的属性名的数组
DocumentFragment: 文档碎片(高效批量更新多个节点)
obj.hasOwnProperty(prop): 判断 prop 是否是 obj 自身的属性

三、数据代理(MVVM.js)

通过一个对象代理对另一个对象中属性的操作(读/写)
通过 vm 对象来代理 data 对象中所有属性的操作
好处: 更方便的操作 data 中的数据
基本实现流程
1. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
2. 所有添加的属性都包含 getter/setter
3. 在 getter/setter 内部去操作 data 中对应的属性数据

四、模板解析(compile.js)

1.模板解析的关键对象: compile 对象 2.模板解析的基本流程:

将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象中
对 fragment 中的所有层次子节点递归进行编译解析处理
- 对插值文本节点进行解析
- 对元素节点的指令属性进行解析
- 事件指令解析
- 一般指令解析
将解析后的 fragment 添加到 el 中显示
3.解析插值语法节点: textNode.textContent = value
根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1
从 data 中取出表达式对应的属性值
将属性值设置为文本节点的 textConten
4.事件指令解析: elementNode.addEventListener(‘eventName’, callback.bind(vm))
从指令名中取出事件名
根据指令属性值(表达式)从 methods 中得到对应的事件处理函数对象
给当前元素节点绑定指定事件名和回调函数的 dom 事件监听
指令解析完后, 移除此指令属性
5.一般指令解析: elementNode.xxx = value
得到指令名和指令值(表达式)
从 data 中根据表达式得到对应的值
根据指令名确定需要操作元素节点的什么属性
- v-text—textContent 属性
- v-html—innerHTML 属性
- v-class–className 属性

五、数据劫持–>数据绑定

数据绑定(model==>View)
一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新(更新)
数据劫持
- 数据劫持是 vue 中用来实现数据绑定的一种技术
- 基本思想: 通过 defineProperty()来监视 data 中所有属性(任意层次)数据的变化, 一旦变化就去更新界面
四个重要对象

Observer

用来对 data 所有属性数据进行劫持的构造函数
- 给 data 中所有属性重新定义属性描述(get/set)
  - 为 data 中的每个属性创建对应的 dep 对象

Dep(Depend)

data 中的每个属性(所有层次)都对应一个 dep 对象
- 创建的时机:
  - 在初始化 define data 中各个属性时创建对应的 dep 对象
    1
    2
    3
    4
    5
    6
    在data中的某个属性值被设置为新的对象时
    对象的结构
    {
    id, // 每个dep都有一个唯一的id
    subs //包含n个对应watcher的数组(subscribes的简写)
    }
- subs 属性说明
  当一个 watcher 被创建时, 内部会将当前 watcher 对象添加到对应的 dep 对象的 subs 中
  当此 data 属性的值发生改变时, 所有 subs 中的 watcher 都会收到更新的通知, 从而最终更新对应的界面

Compile

用来解析模板页面的对象的构造函数(一个实例)
利用 compile 对象解析模板页面
每解析一个表达式(非事件指令)都会创建一个对应的 watcher 对象, 并建立 watcher 与 dep 的关系
complie 与 watcher 关系: 一对多的关系

Watcher

模板中每个非事件指令或表达式都对应一个 watcher 对象
监视当前表达式数据的变化
创建的时机: 在初始化编译模板时
对象的组成

1
2
3

{ vm, //vm对象 exp, //对应指令的表达式 cb,
//当表达式所对应的数据发生改变的回调函数 value, //表达式当前的值 depIds
//表达式中各级属性所对应的dep对象的集合对象 //属性名为dep的id, 属性值为dep }

总结: dep 与 watcher 的关系: 多对多

一个 data 中的属性对应对应一个 dep, 一个 dep 中可能包含多个 watcher(模板中有几个表达式使用到了属性)
模板中一个非事件表达式对应一个 watcher, 一个 watcher 中可能包含多个 dep(表达式中包含了几个 data 属性)
数据绑定使用到 2 个核心技术
- defineProperty()
  - 订阅者-发布者

双向数据绑定

双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的
双向数据绑定的实现流程:
- 在解析 v-model 指令时, 给当前元素添加 input 监听
- 当 input 的 value 发生改变时, 将最新的值赋值给当前表达式所对应的 data 属性

Vue CLI

一、安装

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、vue 的脚手架

脚手架 V2: 相对老的项目
脚手架 v3: 新的项目
脚手架 v4: 最新的(当前用得还少)

三、使用 vue 的脚手架

脚手架 v3

npm install -g @vue/cli

# 创建一个项目
vue create vue-app3

脚手架 v2

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

四、比较 V2 与 V3 创建的项目

v2 的配置是直接可见, v3 是包装隐藏起来了
修改配置: v2 是直接在配置文件中修改, v3 提供了一个专门的配置: vue.config.js, 我们可以根据文档在此文件中添加配置
vue 使用的是不带编译器的版本, 打包文件更小不写 template 配置, 直接 render 配置