xes-frontend-ui

A Component Library for Vue.js

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification （每个组件css写在组件中的打包方法）
npm run build_publish


# build for production with minification （每个组件css单独在packages/theme建立一个和组件js名相同的css文件，并且在组件中不要直接写入css样式的打包方法）
npm run build_publish_theme

# build for production with minification （打包官方examples项目）
npm run build_examples

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

# run e2e tests
npm run e2e

# run all tests
npm test

xes-frontend-ui directory structure

#  源码开发包目录结构
xes-frontend-ui
    ├── build                  // webpack编译配置文件等
    ├── config                  // webpack编译配置文件等
    ├── examples               // 官方主页项目包
    ├── lib                    // 打包后文件目录
        ├── theme              // 具体css/img/fonts资源文件目录
        ├── index.js           // 打包后组件的js文件
    ├── node_modules           // 模块依赖目录
    ├── packages               // 组件的源码目录
        ├── upload              // 具体组件源码包
            ├── src            // Vue组件包
            ├── index.js       // 入口文件
        ├── theme              // 组件css文件目录
            ├── src            // 组件的css源码目录
              ├── upload.less  // 具体组件css源码文件 (注意：组件对应的css文件和js文件必须是同名)
            ├── gulpfile.js    // css打包入口
    ├── src                    // 源码目录
        ├── index.js           // 源码入口文件
    ├── test                   // 测试目录
    ├── .babelrc               // babel配置文件
    ├── .eslintignore          // eslint配置忽略文件
    ├── .eslintrc              // eslint配置
    ├── .gitignore             // git忽略文件
    ├── package.json           // npm包核心文件
    ├── components.json        // 组件列表json
    ├── package-lock.json      // npm包版本控制文件

# 发布版本包目录结构
xes-frontend-ui
    ├── lib                    // 打包后文件目录
        ├── theme              // 具体css/img/fonts资源文件目录
        ├── index.js           // 打包后组件的js文件
    ├── packages               // 组件的源码目录
        ├── upload              // 具体组件源码包
            ├── src            // Vue组件包
            ├── index.js       // 入口文件
    ├── src                    // 源码目录
        ├── index.js           // 源码入口文件
    ├── node_modules           // 模块依赖目录
    ├── package.json           // npm包核心文件

use method

# 全局引用
import xesui from 'xes-frontend-ui'
Vue.use(xesui)

# 按需引用
import {
  Upload,
  Input
} from 'xes-frontend-ui'
Vue.use(Input)
Vue.use(Upload)

# 按需引用需要引入babel-plugin-component工具包，并且在在.babelrc文件中配置如下:
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", {
      "libraryName": "xes-frontend-ui",
      "styleLibrary": {
        "name": "theme",
        "base": true //theme文件中存在base.css文件true,否则false
      }
    }
]