基于vue-cli4.*开发的UI库（极光UI）《一》

前言

aurora-ui 是一款基于 VUE-CLI4.* 的前端 UI组件库，是个人在工作中为了更好的学习和使用vue相关技术栈而实现的。本项目的源码和文档主要参考借鉴了 element-ui和 iView。分离了常用业务组件并封装，部分组件参考这两个开源库进行了简化实现。所有样式为方便开发已使用less进行了重写，现已实现扩展了约 47 个组件可供日常开发。添加了开源协议，编写本UI库的目的也是为了学习提升，熟悉vue相关技术栈及相关UI控件的实现和开发。

vue-cli4.* 创建工程

注意：如果报以下的错误，请参考vue-cli4.* npm install 报错

工程目录如下

修改工程

1. src 变更为 docs
2. 新增 packages 文件夹
3. 根目录下建立vue.config.js

const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'docs/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve('docs')) // @ 默认指向 src 目录，这里要改成 docs
      .set('~', path.resolve('packages')) // ~ 指向 packages

      // 把 packages 和 docs 加入编译，因为新增的文件默认是不被 webpack 处理的
      config.module
        .rule('js')
        .include.add(/packages/).end()
        .include.add(/docs/).end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
  }
}

4. 运行 项目

npm  run serve

5. 最后目录
   

基于vue-cli4.*开发的UI库（极光UI）《二》