1. # 推荐克隆我的项目，保证与文章同步
  2. git clone https://github.com/lxchuan12/element-analysis.git
  3. # npm i -g yarn
  4. cd element-analysis/element && npm run dev
  6. # 或者克隆官方项目
  7. git clone https://github.com/ElemeFE/element.git
  8. # npm i -g yarn
  9. cd element && npm run dev

package.json

  1. {
  2.     "script": {
  3.         "bootstrap": "yarn || npm i",
  4.         "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
  5.         "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
  6.     },
  7. }

在 npm run dev 时是先执行了 npm run bootstrap => yarn || npm i 命令，安装好了依赖。

组件开发规范

通过 make new 创建组件目录结构，包含测试代码、入口文件、文档 如果包含父子组件，需要更改目录结构，参考 Button 组件内如果依赖了其他组件，需要在当前组件内引入，参考 Select

make 命令的配置对应根目录 Makefile。

  1. # element/Makefile
  2. new:
  3.     node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))

通过查看 Makefile 文件我们知道了make new命令对应的是： node build/bin.new.js

调式源码

在最新版的 VSCode 中，auto attach 功能，默认支持智能调试，如果发现不支持，可以通过快捷键 ctrl + shift + p 查看是否启用。 

  1. make new ruochuan 若川组件
  2. # Ubuntu 和 Mac 支持 make 命令
  3. # 不支持可以用 node window 使用 node
  4. node build/bin/new.js ruochuan 若川组件

我电脑输入命令 不进入断点 所以我在 package.json => scripts 配置了 调式命令 npm run debug

  1. "scripts": { 
  2.     ... // 上面的省略 维持不变
  3.     "debug":"node build/bin/new.js xzt"
  4. },

主流程

zy | 第15期 | element 初始化组件功能 - 图1

文件开头判断

  1. 'use strict';
  3. console.log();
  4. process.on('exit', () => {
  5.   console.log();
  6. });
  8. // 第一个参数没传递报错，退出进程
  9. if (!process.argv[2]) {
  10.   console.error('[组件名]必填 - Please enter new component name');
  11.   process.exit(1);
  12. }

process.argv 属性返回一个数组，由命令行执行脚本时的各个参数组成。它的第一个成员总是 node，第二个成员是脚本文件名，其余成员是脚本文件的参数。

引用依赖等

  1. // 路径模块
  2. const path = require('path');
  3. // 文件模块
  4. const fs = require('fs');
  5. // 保存文件
  6. const fileSave = require('file-save');
  7. // 转驼峰
  8. const uppercamelcase = require('uppercamelcase');
  9. // 第一个参数 组件名
  10. const componentname = process.argv[2];
  11. // 第二个参数 组件中文名
  12. const chineseName = process.argv[3] || componentname;
  13. // 转驼峰
  14. const ComponentName = uppercamelcase(componentname);
  15. // package 路径
  16. const PackagePath = path.resolve(__dirname, '../../packages', componentname);
  17. // const Files = [];

文件模板Files

  1. const Files = [
  2.   {
  3.     filename: 'index.js',
  4.     content: `import ${ComponentName} from './src/main';
  6. /* istanbul ignore next */
  7. ${ComponentName}.install = function(Vue) {
  8.   Vue.component(${ComponentName}.name, ${ComponentName});
  9. };
  11. export default ${ComponentName};`
  12.   },
  13.   {
  14.     filename: 'src/main.vue',
  15.     content: `<template>
  16.   <div class="el-${componentname}"></div>
  17. </template>
  19. <script>
  20. export default {
  21.   name: 'El${ComponentName}'
  22. };
  23. </script>`
  24.   },
  25. //   省略其他
  26. ];

New

vue-element-admin
平时日常工作中，做最多的就是写业务模块和组件。当每次新开一个view或者component的时候都需要手动创建一个新.vue，然后创建一个