组件化开发

开源组件库：element-yi，iview
CDD

• CDD(component-Driven Development)
• 自下而上
• 从组建级别开始，到页面级别结束

好处：

• 组建在最大程度被重用
• 并行开发
• 可视化测试

处理组件的边界情况

• $root--通过$root可以访问vue的根实例,操作根实例的成员
• KaTeX parse error: Expected 'EOF', got '#' at position 8: parent/#̲children -- 获取…parent可操作父组件成员，可替换props使用，但是大多数情况都不推荐使用
• $refs – 访问子组件，表单的验证方法就是使用refs
• 依赖注入provide/inject

$root 的使用

<template><div><!--小型应用中可以在 vue 根实例里存储共享数据组件中可以通过 $root 访问根实例-->$root.title：{{ $root.title }}<br><button @click="$root.handle">获取 title</button>&nbsp;&nbsp;<button @click="$root.title = 'Hello $root'">改变 title</button></div>
</template><script>
export default {}
</script>

$parent 的使用

父
<template><div class="parent">parent<child></child></div>
</template><script>
import child from './02-child'
export default {components: {child},data () {return {title: '获取父组件实例'}},methods: {handle () {console.log(this.title)}}
}
</script>
子
<template><div class="child">child<br>$parent.title：{{ $parent.title }}<br><button @click="$parent.handle">获取 $parent.title</button><button @click="$parent.title = 'Hello $parent.title'">改变 $parent.title</button><grandson></grandson></div>
</template><script>
import grandson from './03-grandson'
export default {components: {grandson}
}
</script><style>
.child {border:paleturquoise 1px solid;
}
</style>

$children 的使用

父
<template><div><children1></children1><children2></children2><button @click="getChildren">获取子组件</button></div>
</template><script>
import children1 from './02-children1'
import children2 from './03-children2'
export default {components: {children1,children2},methods: {getChildren () {console.log(this.$children)console.log(this.$children[0].title)console.log(this.$children[1].title)this.$children[0].handle()this.$children[1].handle()}}
}
</script>子
<template><div>children1</div>
</template><script>
export default {data () {return {title: 'children1 获取子组件 - title'}},methods: {handle () {console.log(this.title)}}
}
</script>

$refs 方法，或取到对应组件的dom对象，调用对应组件的方法
点击触发方法，让子组件选中，并修改值

<template><div><myinput ref="mytxt"></myinput><button @click="focus">获取焦点</button></div>
</template><script>
import myinput from './02-myinput'
export default {components: {myinput},methods: {focus () {this.$refs.mytxt.focus()this.$refs.mytxt.value = 'hello'}}// mounted () {//   this.$refs.mytxt.focus()// }
}
</script>
myinput 组件
<template><div><input v-model="value" type="text" ref="txt"></div>
</template><script>
export default {data () {return {value: 'default'}},methods: {focus () {this.$refs.txt.focus()}}
}
</script>

通过依赖注入，获取父组件中从成员
依赖注入，方便在组件嵌套过多，在子组件中获取父组件成员

通过在父组件的provide，可以在父组件提供对应的属性和成员，可以在子组件中使用 inject注入进来，更深的组件也可以使用inject成员，获取到的值不要进行改变，不是对应的响应式的

parent.vue<template><div class="parent">parent<child></child></div>
</template><script>
import child from './02-child'
export default {components: {child},provide () {return {title: this.title,handle: this.handle}},data () {return {title: '父组件 provide'}},methods: {handle () {console.log(this.title)}}
}
</script>child.vue
<template><div class="child">child<br>title：{{ title }}<br><button @click="handle">获取 title</button><button @click="title='xxx'">改变 title</button><grandson></grandson></div>
</template><script>
import grandson from './03-grandson'
export default {components: {grandson},inject: ['title', 'handle']
}
</script>grandson.vue
<template><div class="grandson">grandson<br>title：{{ title }}<br><button @click="handle">获取 title</button><button @click="title='yyy'">改变 title</button></div>
</template><script>
export default {inject: ['title', 'handle']
}
</script>

attrs-listeners

• $attrs: 把父组件中非prop属性绑定到内部组件
• $listeners: 把父组件中的DO对象的原生事件绑定到内部组件

自定义组件<template><!--1. 从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上如果是 class 和 style 的话，会合并最外层标签的 class 和 style --><!-- <input type="text" class="form-control" :placeholder="placeholder"> --><!--2. 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承然后通过 v-bind="$attrs" 把外部传入的非 prop 属性设置给希望的标签上但是这不会改变 class 和 style--><!-- <div><input type="text" v-bind="$attrs" class="form-control"></div> --><!--3. 注册事件--><!-- <div><inputtype="text"v-bind="$attrs"class="form-control"@focus="$emit('focus', $event)"@input="$emit('input', $event)"></div> --><!--4. $listeners--><div><inputtype="text"v-bind="$attrs"class="form-control"v-on="$listeners"></div>
</template><script>
export default {// props: ['placeholder', 'style', 'class']// props: ['placeholder']inheritAttrs: false
}
</script><style></style>使用组件<template><div><!-- <myinputrequiredplaceholder="Enter your username"class="theme-dark"data-test="test"></myinput> --><myinputrequiredplaceholder="Enter your username"class="theme-dark"@focus="onFocus"@input="onInput"data-test="test"></myinput><button @click="handle">按钮</button></div>
</template><script>
import myinput from './02-myinput'
export default {components: {myinput},methods: {handle () {console.log(this.value)},onFocus (e) {console.log(e)},onInput (e) {console.log(e.target.value)}}
}
</script>

快速原型开发

• Vuecli中提供了一个插件可以进行原型快速开发
• 需要先安装一个全局的扩展 npm install -g @vue/cli-service-global
• 使用vue serve 快速查看组件的运行效果

Vue serve 的使用

• vue serve 如果不指定参数默认会在当前目录找到以下的入口文件 main.js、index.js、App.vue、app.vue
• 可以指定要加载的组件 vue serve ./src/login.vue

快速原型开发-element-UI

在第三方组件上进行二次开发

1. 初始化 package.json npm init -y
2. 安装element-ui vue add element
3. 记载elementUI,使用Vue.use()安装插件

开发步骤条组件

组件分类

• 第三方组件
• 基础组件
• 业务组件

步骤条组件
动态生成步骤，完成步骤高亮显示

Steps.vue

<template><div class="lg-steps"><div class="lg-steps-line"></div><divclass="lg-step"v-for="index in count":key="index":style="{ color: active >= index ? activeColor : defaultColor }">{{ index }}</div></div>
</template><script>
import './steps.css'
export default {name: 'LgSteps',props: {count: {type: Number,default: 3},active: {type: Number,default: 0},activeColor: {type: String,default: 'red'},defaultColor: {type: String,default: 'green'}}
}
</script>

样式

.lg-steps {position: relative;display: flex;justify-content: space-between;
}.lg-steps-line {position: absolute;height: 2px;top: 50%;left: 24px;right: 24px;transform: translateY(-50%);z-index: 1;background: rgb(223, 231, 239);
}.lg-step {border: 2px solid;border-radius: 50%;height: 32px;width: 32px;display: flex;justify-content: center;align-items: center;font-weight: 700;z-index: 2;background-color: white;box-sizing: border-box;
}

使用

<template><div><steps :count="count" :active="active"></steps><button @click="next">下一步</button></div>
</template><script>
import Steps from './Steps.vue'
export default {components: {Steps},data () {return {count: 4,active: 0}},methods: {next () {this.active++}}
}
</script><style></style>

表单组件

注意项：展示表单中的元素，校验是否合法，form表单项的内容是变化的，需要使用slot占位，设置ref，ref的作用是点击按钮通过refs找到当前的表单对象，调用验证方法

整体结构

• Form
• FormItem
• Input
• Button

Form.vue

<template><form><slot></slot></form>
</template><script>
export default {name: 'LgForm',provide () {return {form: this}},props: {model: {  // model是表单传递过来的数据对象type: Object},rules: { // rules 是绑定的验证规则对象type: Object}},methods: {}
}
</script>

FormItem.vue
表单项是动态的，也设置slot插槽，label显示文本，slt显示的是标签之间的内容，p标签显示验证失败的文本
传递属性，label传递对应文本，prop显示model里的属性

<template><div><label>{{ label }}</label><div><slot></slot><p v-if="errMessage">{{ errMessage }}</p></div></div>
</template><script>
import AsyncValidator from 'async-validator'
export default {name: 'LgFormItem',inject: ['form'],props: {label: {type: String},prop: {type: String}},mounted() {this.$on('validate', () => {this.validate()})},data () {return {errMessage: ''}},methods: {}
}
</script>

input.vue
input绑定的value属性，绑定@input方法，placeholder设置属性默认值，type显示表单类型，默认text，输入框方法通过$emit()方法返回对应的值, 使用 $ attrs 接收传递过来的属性

<template><div><input v-bind="$attrs" :type="type" :value="value" @input="handleInput"></div>
</template><script>
export default {name: 'LgInput',inheritAttrs: false,props: {value: {type: String},type: {type: String,default: 'text'}},methods: {handleInput (evt) {this.$emit('input', evt.target.value)}}
}
</script>

button.vue

<template><div><button @click="handleClick"><slot></slot></button></div>
</template>
<script>export default{name:"Button",methods:{handleClick(event){this.$emit('click',event)event.preventDefault();     }}}
</script>

表单验证

表单验证中分为两部分

1. formitem中实现单个表单项的验证，在校验时候验证是否合法
2. form中实现对所有表单项的验证

FormItem的验证
获取到验证的数据及规则，在model和rules中
在组件中直接通过parent对应的组件对象，可以通过依赖注入中实现

From.vue中增加provide

  provide () {return {form: this}},

FormItem.vue注入form对象

inject: ['form'],

使用验证模块，async-validator
安装 npm install async-validator

 methods: {validate () {if (!this.prop) return  // 判断是否传入props属性，没传不用验证const value = this.form.model[this.prop] // 验证数据const rules = this.form.rules[this.prop]  // 验证规则const descriptor = { [this.prop]: rules } const validator = new AsyncValidator(descriptor)return validator.validate({ [this.prop]: value }, errors => {if (errors) {this.errMessage = errors[0].message} else {this.errMessage = ''}})}  }

input 组件中触发自定义事件validate
FormItem渲染完毕注册自定义事件validate

<template><div><input v-bind="$attrs" :type="type" :value="value" @input="handleInput"></div>
</template><script>
export default {name: 'LgInput',inheritAttrs: false,props: {value: {type: String},type: {type: String,default: 'text'}},methods: {handleInput (evt) {this.$emit('input', evt.target.value)const findParent = parent => {while (parent) { // 循环找父组件的类型if (parent.$options.name === 'LgFormItem') {break  //如果是，等一下触发自定义事件} else {parent = parent.$parent}}return parent}const parent = findParent(this.$parent)if (parent) {parent.$emit('validate')}}}
}
</script><style></style>

<template><div><label>{{ label }}</label><div><slot></slot><p v-if="errMessage">{{ errMessage }}</p></div></div>
</template><script>
import AsyncValidator from 'async-validator'
export default {name: 'LgFormItem',inject: ['form'],props: {label: {type: String},prop: {type: String}},mounted() {this.$on('validate', () => {this.validate()})},data () {return {errMessage: ''}},methods: {validate () {if (!this.prop) returnconst value = this.form.model[this.prop]const rules = this.form.rules[this.prop]const descriptor = { [this.prop]: rules }const validator = new AsyncValidator(descriptor)return validator.validate({ [this.prop]: value }, errors => {if (errors) {this.errMessage = errors[0].message} else {this.errMessage = ''}})}  }
}
</script><style></style>

<template><form><slot></slot></form>
</template><script>
export default {name: 'LgForm',provide () {return {form: this}},props: {model: {type: Object},rules: {type: Object}},methods: {validate (cb) {const tasks = this.$children.filter(child => child.prop).map(child => child.validate())Promise.all(tasks).then(() => cb(true)).catch(() => cb(false))}}
}
</script><style></style>

Monorepo

两种项目的组织方式

• Multirepo(multiple Repository) 每一个包对应一个项目
• Monorepo(Monolithic Repository) 一个项目仓库中管理多个模块/包

vue，react使用的都是Monorepo方式，每个包单独使用，

新建项目

结构
packages 放对应的各种组件，例如button，form等，内部是单独一个组件，可以单独发布，使用，test放置测试内容，dist放置打包后的代码，src放置源码的vue

src放置源码vue代码

进入单独的组件内，npm init -y 安装依赖，生成对应的package.json，进行单独管理

Storybook

Storybook是开发组件库的必备，故事书，每一个组件都是一个个故事

• 可视化的组件展示平台
• 在隔离的开发环境中，以交互式的方式展示组件
• 独立开发组件
• 支持的框架 React,RN,Vue,Angular Ember,HTML,Svelte,Mithril,Riot

自动安装

• npx -p @storybook/li sb init --type vue
• yarn add vue
• vue yarn add vue-loader vue-template-compiler --dev

手动安装

使用 yarn storybook 打开新的页面，会自动构建浏览器
.storybook文件夹存放的是storybook的配置项

yarn workspaces

之前每个包单独安装依赖，容易出现安装重复，浪费空间
使用 yarn workspaces的工作区

开启yarn 的工作区
项目根目录下的package.json中

  "private": true,"workspaces": ["packages/*"],

具体使用

• 给工作区根目录安装开发依赖 yarn add jest -D -W
• 给指定工作区安装依赖 yarn workspace qft-button add lodash@4
• 给所有工作区安装依赖 yarn install

删除之前文件夹下对应的node_modules

Lerna

方便将项目中的所有包统一发布

• Lerna 是一个优化使用git和npm管理多包仓库的工作流工具
• 用于管理具有多个包的javascript项目
• 可以一键把代码提交到git和npm仓库

使用

• 安装 yarn global add lerna
• 初始化 learn init
• 发布 learn publish

learn.json 中放learn中的配置

{"packages": ["packages/*"],"version": "0.0.3"
}

使用 yarn learn ，执行learn publish，发布到github和npm

Vue 组件的单元测试

单元测试就是对函数的输入输出进行测试，使用断言的方式，就是根据判断实际的输出和预测的输出是否相同

单元测试优点

• 提供描述组件行为的文档
• 节省手动测试的时间
• 减少研发新特性产生的bug
• 改进设计
• 促进重构

配置单元测试的环境

• yarn add jest @vue/test-utils vue-jest babel-jest -D -W
• 安装依赖 Vue Test Utils Jest vue-jest babel-jest
  配置测试脚本
  package.json

"scripts": {"test": "jest","storybook": "start-storybook -p 6006","build-storybook": "build-storybook","lerna": "lerna publish",},

Jest 配置
jest.config.js

module.exports = {"testMatch": ["**/__tests__/**/*.[jt]s?(x)"],"moduleFileExtensions": ["js","json",// 告诉 Jest 处理 `*.vue` 文件"vue"],"transform": {// 用 `vue-jest` 处理 `*.vue` 文件".*\\.(vue)$": "vue-jest",// 用 `babel-jest` 处理 js".*\\.(js)$": "babel-jest" }
}

babel配置
babel.config.js

module.exports = {presets: [['@babel/preset-env']]
}

babel 桥接
yarn add babel-core@bridge -D -W

测试函数

import input from '../src/input.vue'
import { mount } from '@vue/test-utils'describe('qft-input', () => {test('input-text', () => {const wrapper = mount(input)expect(wrapper.html()).toContain('input type="text"')})test('input-password', () => {const wrapper = mount(input, {propsData: {type: 'password'}})expect(wrapper.html()).toContain('input type="password"')})test('input-password', () => {const wrapper = mount(input, {propsData: {type: 'password',value: 'admin'}})expect(wrapper.props('value')).toBe('admin')})test('input-snapshot', () => {const wrapper = mount(input, {propsData: {type: 'text',value: 'admin'}})expect(wrapper.vm.$el).toMatchSnapshot()})
})

输入 yarn test ，得到输出，可以根据输出查看结果

Rollup打包

rollup.config.js

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'const isDev = process.env.NODE_ENV !== 'production'// 公共插件配置
const plugins = [vue({// Dynamically inject css as a <style> tagcss: true,// Explicitly convert template to render functioncompileTemplate: true}),json(),nodeResolve(),postcss({// 把 css 插入到 style 中// inject: true,// 把 css 放到和js同一目录extract: true})
]// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')module.exports = fs.readdirSync(root)// 过滤，只保留文件夹.filter(item => fs.statSync(path.resolve(root, item)).isDirectory())// 为每一个文件夹创建对应的配置.map(item => {const pkg = require(path.resolve(root, item, 'package.json'))return {input: path.resolve(root, item, 'index.js'),output: [{exports: 'auto',file: path.resolve(root, item, pkg.main),format: 'cjs'},{exports: 'auto',file: path.join(root, item, pkg.module),format: 'es'},],plugins: plugins}})

通过一个命令进行所有组件打包

设置环境变量
使用cross-env
安装依赖 yarn add cross-env -D -W
配置build

  "scripts": {"test": "jest","storybook": "start-storybook -p 6006","build-storybook": "build-storybook","lerna": "lerna publish","build:prod": "cross-env NODE_ENV=production rollup -c","build:dev": "cross-env NODE_ENV=development rollup -c","clean": "lerna clean","plop": "plop"},

生产环境打包： yarn build:prod
开发环境打包：yarn build:dev
可以将所有的组件一键打包刀对应文件下单dist文件夹下

清理

清理除根目录下的node_modules
使用 yarn clean 一键删除

基于模板生成组件基本结构

使用plop
配置plopfile.js，将创建的模板放到指定的目录
使用 yarn plop命令
会出现提升输入的组件名，对应输入即可

module.exports = plop => {plop.setGenerator('component', {description: 'create a custom component',prompts: [{type: 'input',name: 'name',message: 'component name',default: 'MyComponent'}],actions: [{type: 'add',path: 'packages/{{name}}/src/{{name}}.vue',templateFile: 'plop-template/component/src/component.hbs'},{type: 'add',path: 'packages/{{name}}/__tests__/{{name}}.test.js',templateFile: 'plop-template/component/__tests__/component.test.hbs'},{type: 'add',path: 'packages/{{name}}/stories/{{name}}.stories.js',templateFile: 'plop-template/component/stories/component.stories.hbs'},{type: 'add',path: 'packages/{{name}}/index.js',templateFile: 'plop-template/component/index.hbs'},{type: 'add',path: 'packages/{{name}}/LICENSE',templateFile: 'plop-template/component/LICENSE'},{type: 'add',path: 'packages/{{name}}/package.json',templateFile: 'plop-template/component/package.hbs'},{type: 'add',path: 'packages/{{name}}/README.md',templateFile: 'plop-template/component/README.hbs'}]})
}

发布

进行生产环境打包，yarn build:prod
发布，先登录npm
npm 名
调用 npm 的learn发布 ，yarn learn
选择版本
查看对应的npm网站