package.json

eslint

"extends": "elemefe", ==> "eslint-config-elemefe": "0.1.1",

scripts

iconInit.js

提取 packages/theme-chalk/src/icon.scss 中的 /.el-icon-([^:]+):before/行生成框架支持的图标列表,结果存到 icon.json中:

结果: ==>

build-entry.js

生成,src/index.js

components.json中定义了组件名称及其位置
使用json-templater/string 做模板解析(解析{{data

var render = require('json-templater/string');
render('{{xfoo}} {{say.what}}', { xfoo: 'yep', say: { what: 'yep' } });

文件结构:

导入packages下的组件


import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
...

将组件放到components数组中

const components = [
  Pagination,
  Dialog,
  ...

定义install 并将这些组件注册到vue中

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

导出这些组件

export default {
  version: '2.8.2',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  ...
}

i18n.js

读取examples/i18n/page.json 中配置内容 ,此文件定义了lang(zh-cn,en-US...)然后将pages/template中的一个个文件生成对应语言的版本. 解析模板方式, --- 直接循环语言项然后正则替换

Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });

version.js

生成version.json

gen-cssfile

生成packages/theme-chalk/src/index.scss

packages/theme-chalk/src包含了每个组件的样式本文件就是将这些文件组织成index.scss

@import "./base.scss";//此行为默认的. 不是组件的
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
@import "./dropdown.scss";
...

packages/theme-chalk/gulpfile.js

将 packages/theme-chalk/src/*.scss 用scss 翻译压缩后存到 packages/theme-chalk/lib下
将./src/fonts/** 压缩后放到 ./lib/fonts下

cp-cli packages/theme-chalk/lib lib/theme-chalk

template.js

watch ./examples/pages/template when change, exec "npm run i18n" /template 中的都是模板文件, 当其被修改后重新生成各个语言的文件 (see above :i18n.js)

使用的工具:

chokidar

A neat wrapper around Node.js fs.watch / fs.watchFile / FSEvents.

const chokidar = require('chokidar');
let watcher = chokidar.watch([templates]);

watcher.on('ready', function() {
  watcher
    .on('change', function() {
      exec('npm run i18n');
    });
});

webpack

build/webpack.demo.js

entry

dev: /examples/entry.js 生成演示网站
prod ./src/index.js 供生产用的组件库,index.js是在 build-entry.js 中生成的
play ./examples/play.js 一个很小的使用element的例子
```
import Vue from 'vue';
```

import Element from 'main/index.js'; import App from './play/index.vue'; import 'packages/theme-chalk/src/index.scss';

Vue.use(Element);

new Vue({ // eslint-disable-line render: h => h(App) }).$mount('#app');


# 体会
整个项目将,组件代码,dev演示, 空白项目,生产包的生成 放在一起.
我们可以将自己项目中的组件按此方式组织,以方便团队使用....

element-ui-2.8.2-package.json