dgg-ui (Vue 2.6.10 ElementUI 2.7.0)

This is a project base on vue and element-ui

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080 this is a document show
npm run dev

# serve with hot reload at localhost:8080 this is a live test show
npm run demo

# build for production with minification
npm run build

# build for component with minification
npm run component

# build for production and view the bundle analyzer report
npm run build --report

目录

build //webpack打包的各种配置包括markdown-loader编译和各种es6语法和scss编译，等等配置

config //webpack的开发环境和生成环境的配置

demo //该目录直接引入的未编译的es6语法编写的vue组件，方便新增组件的时候测试

dggplug //新增vue组件的目录，方便扩展组件

examples //所有的文档都在该目录下，文档大部分都是markdown文件，通过md-loader编译成vue组件，
样式为md-loader根据路由寻找demo-styles下的同名文件添加，示例通过iframe加载static下的文件

lib // 所有的组件以及样式打包编译生成的目录，es5只需要引入theme-chalk/index.css和index.js即可使用组件，
es6需要引入elment-ui.common.js和themen/index.css使用组件

packages //elementui源码所有内置的组件，每个组件都提供一个Install方法，调用vue.compoent即可全局注册组件使用

theme-chalk //所有的elementui的组件样式都在该目录下，新增组件的样式以及编写示例时新增的样式都放置于theme-chalk/src/dggplug下，
该项目下的lib是gulp打包编译后生成的各个组件样式和一个完整的index.css

src //引入./packages为所有组件并声明一个安装方法

static //静态文件只有在打包文档的时候会打包进去，所有的es5示例代码都写在该目录下

### 重要文件说明

componet.json执行npm run component会通过这个入口找到各个声明的组件并打包，在dggplug下新增的组件必须在这个文件声明

### 常用命令说明

npm run compoent 这是一个综合命令，分别打包编译生成es5和es6都可以使用的js,即index.js和element-ui.common.js，
还有各个组件的样式打包，以及删除已经打包文件，并且复制文件到指定的目录。

npm run demo 这个命令启动一个本地服务引入未编译的组件样式和js代码，方便新增组件进行各种调试

npm run dev 启动本地服务，展示dggui的文档和示例

npm run build 打包编译文档，方便放置于服务器

npm run build:theme 打包css

npm run cp:file 移动index.js和index.css到static文件夹下

npm run clean 删除之前打包的文件夹

扩展组件说明(需要更改以下几个地方,新增组件都以dgg开头)

dggplug //新增组件的js和template
theme-chalk/src/dggplug //新增样式
src/index.js 导入新增组件
components.json 根目录声明要打包的新增组件
注：如果要扩展原element组件，可先复制packages下原有组件到dggplug，再新增theme-chalk/src/dggplug下的样式文件，可参考dgg-upload

样式修改说明(修改组件样式建议新增类名覆盖，颜色建议覆盖原组件样式)

theme-chalk/src/dggplug/common/var_reset.scss //修改样式变量文件
theme-chalk/src/dggplug/componets //该目录下文件为组件样式,含有reset的scss文件表示覆盖element组件样式的文件
theme-chalk/src/dggplug/pages //该目录下的文件为所有示例demo页面自己定义的一些样式文件与组件无关(页面特定样式建议写在相关demo中，基础样式才写在这个目录下)
theme-chalk/src/dggplug/dgg-common.scss //该文件定义一些常用的mixin用于dggplug组件scss编写

//常用mixin说明
//连接命名空间和传入的参数
@mixin bb($block) {
    $D: $dgg-namespace+'-'+$block !global;
    .#{$D} {
        @content;
    }
}
//循环传入的参数生成el--table-mini类似的命名css
@mixin ee($element) {
    ...
    @at-root //该指令表示不生成嵌套的css 
}