Vue开发实战

wen 2021/7/21 极客时间

源链接：https://time.geekbang.org/course/intro/100024601 (opens new window)

# 1. 基础篇

# 相关概念

一款渐进式 JavaScript 框架。
轻量级；渐进式框架；响应式更新机制；学习成本低。
指令就是一个标志位，底层会根据这个标志去做相应处理。
双向数据绑定和单向数据流不冲突。
虚拟 DOM 及 key 属性的作用。
数据来源（单向的）：来自父元素的属性、来自组件自身的状态、来自状态管理器。

# 组件基础及组件注册

Vue.component() 。
单文件组件：.vue 后缀；template - script - style。

# Vue 组件的核心概念

事件：【1】v-on / @；【2】$emit；【3】事件修饰符。
插槽：【1】插槽的作用：传递复杂内容的方式。【2】作用域插槽可以理解为，本质上是返回组件的函数。
计算属性 computed：减少模板中计算逻辑、数据缓存、依赖固定的数据类型（响应式数据）。
侦听器 watch：更加灵活、通用；可以执行任何逻辑，如函数节流、异步请求数据、操作 DOM。

# 2. 生态篇

# 相关概念

代码库：https://gitee.com/geektime-geekbang/geektime-vue-1 (opens new window)。
Vuex 是一种状态管理模式。
Vuex 核心概念：state / getter / mutation / action / module。
SPA 及其优缺点：https://blog.csdn.net/qq_38188762/article/details/105175554 (opens new window)
vue-router 底层原理：【router-link / $router.push / a href / 浏览器前进后退 / 手动更改 URL】 --> updateRoute --> Vue.util.defineReactive_route --> router-view。
SPA 缺点：不利于 SEO（服务端渲染 SSR）、首屏渲染时间长（预渲染 Prerendering）。
对于动态内容，如果不使用 SSR，如何做 SEO：使用无头浏览器（phantomjs、headlessChrome）
Nuxt：静态站点、动态渲染、简化配置。
Vuex 是通过什么方式提供响应式数据的：new Vue({})。
Vuex 注入 $store：beforeCreate 中混入 $store 的获取方式。

# 手写 vuex

import Vue from 'vue'

const Store = function Store(option = {}) {
    const {state = {}, mutations = {}, actions = {}, getters={}} = option;
    this._vm = new Vue({
        data: {
            $sstate: state
        }
    })
    this._mutations = mutations
    this._actions = actions
    this._getters = getters
    const ref = this
    const commit = ref.commit
    const dispatch = ref.dispatch

    this.commit = function boundCommit(type, paylod){
        return commit.call(ref, type, paylod)
    }

    this.dispatch = function boundDispatch(type, paylod){
        return dispatch.call(ref, type, paylod)
    }
}

Store.prototype.commit = function(type, paylod) {
    if(this._mutations[type]){
        this._mutations[type](this.state, paylod)
    }
}

Store.prototype.dispatch = function(type, paylod){
    if(this._actions[type]){
        this._actions[type]({
            state: this.state,
            commit: this.commit,
            paylod,
        })
    }
}

Store.prototype.getters = function(type){
    if(this._getters[type]){
        this._getters[type](this.state)
    }
}

Object.defineProperties(Store.prototype,{
    state: {
        get: function(){
            return this._vm.$data.$sstate
        }
    }
})

export default {Store}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 单元测试

重要性：保证研发质量、提高项目的稳定性、提高开发速度。
使用方式：jest、@vue/test-utils、sinon（mock）。

// jest.config.js
module.exports = {
    // jest-transform-stub
}

1
2
3
4

// 生成快照，校验两次 html
expect(wrapper.hmtl()).toMatchSnapshot()

1
2

# 3. 实战篇

# 掌握重点

实现一个可动态改变的页面布局：route.query、this.$router.options.routers。
如何将菜单和路由结合：router.js -- meta。
如何使用路由管理用户权限：router.js -- meta -- auth -- router.beforeEach。
更加精细化的权限设计（权限组件、权限指令）：权限组件比较灵活；权限指令无法动态改变，仅第一次进行判断后就无法改变。
学会创建一个普通表单。
初始数据、自动校验、动态赋值。
自己封装一个支持自动校验的表单项。
动态传参：v-bind="obj"。
使用了 v-decorator 就不能用 value 或 v-model。
如何管理系统中使用的图标：【1】iconfont -- svg -- antd-vue 里面可以自定义图标 (opens new window)。【2】import logo from '@/assets/logo.svg'; 。【3】vue-svg-loader，可以将其作为组件引入并使用，import / components。
vue-cli 导出 webpack 配置信息：vue inspect > output.js。
如何定制主题及动态切换主题：创建多个主题文件再按需引入，每个主题内容尽量饱满。style -- src=''。
如何做好国际化：vuei18n。

# 如何设计一个高扩展性的路由

路由懒加载：import。
component: { render: h => h('router-view') }。
layouts：<router-view />。
router.beforeEach()、router.afterEach()、nprogress。

data() {
    // 非响应式数据
    this.select = {}
    // 响应式数据
    return {
        selected: []
    }
}

1
2
3
4
5
6
7
8

# 如何在组件中使用 ECharts、Antv 等其他第三方库

resize-detector。
this.option = { ...this.option }：option 会改变自己。（解决深度监听比较耗性能的问题）

# 如何高效地使用 Mock 数据进行开发

mockjs。
利用代理：webpack (opens new window)相关知识。

const mock = require(`./mock/${name}`);
// 清除缓存 require，防止修改 require 里面的内容但实际确还是使用的缓存
delete require.cache[require.resolve(`./mock/${name}`)];

1
2
3

# 如何与服务端进行交互（axios）

cross-env、axios。

// package.json
'scripts': {
    'serve': 'vue-cli-service serve',
    'serve:no-mock': 'cross-env MOCK=none vue-cli-service serve'
}

process.env.MOCK = 'none';

1
2
3
4
5
6
7

vuejs/jsx：GitHub (opens new window)。

# 如何高效地构建打包发布

按需加载。
懒加载。
查看打包 report：npm run build -- --report。

# 如何构建可交互的组件文档

傻傻的写两次。
插件：webpack、raw-loader、vue-highlightjs - highlightjs 样式文件引入。
自己重写一个 loader，高度的自定义化。一般用 .md 编写，用 loader 来转换。

# 如何做好组件的单元测试

jest.config.js。
.eslintrc.js：新增 env: { jest: true }。
测试监听：npm run test:unit -- --watch。

# 如何发布组件到npm

【1】npm (opens new window)：注册账号。【2】package.json：name / version 必须的；main / module / typings / files 相对比较重要。【3】nrm (opens new window)：管理 npm 的源。

# 结课测试 & GitHub 相关生态应用（持续集成、单测覆盖率、文档发布、issue 管理）

CI 持续集成：【1】travis-ci：https://www.travis-ci.org/ (opens new window)；【2】circleci：https://circleci.com/ (opens new window)。
单测覆盖率：【1】codecov：https://about.codecov.io/ (opens new window)；【2】coveralls：https://coveralls.io/ (opens new window)。
文档管理：【1】github.io；【2】gitee.io；【3】netlify：https://www.netlify.com/ (opens new window)。
issue 管理（插件）：https://github.com/apps/close-issue-app (opens new window)。

重学前端玩转Vue3全家桶