每次新增页面复制粘贴？100 多行源码的 element-ui 新增组件功能告诉你减少重复工作

1. 学会调试学习源码2. element-ui 如何初始化新的组件3. 可以学以致用应用到自己开发的项目中，比如新增页面等4. 等等

# 推荐克隆我的项目，保证与文章同步git clone https://github.com/lxchuan12/element-analysis.git# npm i -g yarncd element-analysis/element && npm run dev
# 或者克隆官方项目git clone https://github.com/ElemeFE/element.git# npm i -g yarncd element && npm run dev

git clone git@github.com:ElemeFE/element.gitnpm run dev
# open http://localhost:8085

{    "script": {        "bootstrap": "yarn || npm i",        "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",        "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",    },}

# element/Makefilenew:  node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))

make new ruochuan 若川组件# Ubuntu 和 Mac 支持 make 命令# 不支持可以用 nodenode build/bin/new.js ruochuan 若川组件

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

// 路径模块const path = require('path');// 文件模块const fs = require('fs');// 保存文件const fileSave = require('file-save');// 转驼峰const uppercamelcase = require('uppercamelcase');// 第一个参数 组件名const componentname = process.argv[2];// 第二个参数 组件中文名const chineseName = process.argv[3] || componentname;// 转驼峰const ComponentName = uppercamelcase(componentname);// package 路径const PackagePath = path.resolve(__dirname, '../../packages', componentname);// const Files = [];

const Files = [  {    filename: 'index.js',    content: `import ${ComponentName} from './src/main';
/* istanbul ignore next */${ComponentName}.install = function(Vue) {  Vue.component(${ComponentName}.name, ${ComponentName});};
export default ${ComponentName};`  },  {    filename: 'src/main.vue',    content: `<template>  <div class="el-${componentname}"></div></template>
<script>export default {  name: 'El${ComponentName}'};</script>`  },//   省略其他];

// 添加到 components.jsonconst componentsFile = require('../../components.json');if (componentsFile[componentname]) {  console.error(`${componentname} 已存在.`);  process.exit(1);}componentsFile[componentname] = `./packages/${componentname}/index.js`;fileSave(path.join(__dirname, '../../components.json'))  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')  .end('\n');

// 添加到 index.scssconst sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;fileSave(sassPath)  .write(sassImportText, 'utf8')  .end('\n');

// 添加到 element-ui.d.tsconst elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');
let elementTsText = `${fs.readFileSync(elementTsPath)}/** ${ComponentName} Component */export class ${ComponentName} extends El${ComponentName} {}`;
const index = elementTsText.indexOf('export') - 1;const importString = `import { El${ComponentName} } from './${componentname}'`;
elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);
fileSave(elementTsPath)  .write(elementTsText, 'utf8')  .end('\n');

// const PackagePath = path.resolve(__dirname, '../../packages', componentname);// 创建 packageFiles.forEach(file => {  fileSave(path.join(PackagePath, file.filename))    .write(file.content, 'utf8')    .end('\n');});

const navConfigFile = require('../../examples/nav.config.json');
Object.keys(navConfigFile).forEach(lang => {  let groups = navConfigFile[lang][4].groups;  groups[groups.length - 1].list.push({    path: `/${componentname}`,    title: lang === 'zh-CN' && componentname !== chineseName      ? `${ComponentName} ${chineseName}`      : ComponentName  });});
fileSave(path.join(__dirname, '../../examples/nav.config.json'))  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')  .end('\n');  console.log('DONE!');