初始化

新建文件夹ElementUI

npm init -y初始化空的package.json

npm install element-ui -S安装

json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "elementui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "element-ui": "^2.15.12"
  }
}

只装了element-ui（以下简称element），node_modules文件夹如下

image-20221120180724796

目录结构

image-20221120180948695

  • lib
    • 存放element打包后的文件，也就是我们使用时实际依赖的文件
  • packages
    • 存放组件相关的源代码
  • src
    • 存放了像指令、混入、工具方法等源代码
  • types
    • 存放了ts的类型声明文件
  • 重点
    • packages
    • types

packages文件夹

该目录下的文件夹，都是以我们使用的组件命名的

image-20221121061533964

以card文件夹为例

  • index.js

    • 导出了一个install方法，内容是全局注册Card组件

    • 这也是可以直接通过Vue.use注册组件的原因

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import Card from './src/main';

    /* istanbul ignore next */
    Card.install = function(Vue) {
      Vue.component(Card.name, Card);
    };

    export default Card;

  • src/main.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
        <div class="el-card__header" v-if="$slots.header || header">
          <slot name="header">{{ header }}</slot>
        </div>
        <div class="el-card__body" :style="bodyStyle">
          <slot></slot>
        </div>
      </div>
    </template>

    <script>
      export default {
        name: 'ElCard',
        props: {
          header: {},
          bodyStyle: {},
          shadow: {
            type: String
          }
        }
      };
    </script>

有些组件的代码，并不会存放在组件同名文件夹下，比如el-form-item组件，这个组件一般会与el-form组件一起使用，相当于el-form的子孙组件，这种组件的vue文件一般会放在祖先组件的文件夹下

image-20221121063423818

案例分析

el-input可以搭配el-form-item实现表单验证