前端组件化开发

一、前言

开源组件库

• Element-UI
• iView

CDD

组件优先的开发方式，组件驱动开发。

• 自上而下
• 从组件级别开始，到页面级别结束

CDD的好处：

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

二、组件开发相关Vue知识点

处理组件的边界情况

• $root：访问到Vue的根实例，操作根实例中的成员，可以在Vue根实例中存储共享数据，但还是推荐使用Vuex管理状态。
• $parent/$children：获取父组件/子组件，并操作其中成员。大多数情况下，不推荐使用。
  
• $refs：可以访问子组件
  
• 依赖注入 provide/inject
  
• $attrs/$listeners
  • 把父组件中非prop属性绑定到内部组件
  • 把父组件中的DOM对象的原生事件绑定到内部组件
    

三、快速原型开发

• 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组件开发

• 初始化package.json
  npm init -y
• 安装Element-UI
  vue add element
• 加载Element-UI，使用Vue.use()安装插件

四、组件开发

组件分类

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

组件开发-表单组件

整体结构

• Form

<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>

• FormItem

<template>
  <div>
    <label>{
   {
    label }}</label>
    <div>
      <slot></slot>
      <p v-if="errMessage">{
   {
    errMessage }}</p>
    </div>
  </div>
</template