基于elementUi + Vxe + Echarts 二次封装业务组件库，commonUtils方法调用

项目地址

npm库地址：https://www.npmjs.com/package/dd-ui-library 组件库：https://github.com/YolandaKisses/ui-library 

目录结构

├─ src │  └─ components // 存放测试页面 │  └─ lib // 存放组件源码 │  └─ utils // 存放工具类 │  └─ router // 路由配置指向测试页面进行组件调试 │  └─ main.js ├─ .gitignore └─ package.json 

组件封装

src/lib 下存放组件源码，目录结构需统一为 ├─ xxx组件 │  └─ src  │	└─ index.vue // 组件源码 │  └─ index.js // 调用install方法注册 

工具类封装

src/utils/index.js 为工具类方法出口文件 所有方法需导入index.js中，使用export default{}导出 

组件测试

/components 中导入已封装完成的业务组件 /router中配置相应路由，指向/componetns中.vue文件(已封装完成的组件)用于页面展示进行测试 

配置打包命令进行打包

配置scripts打包命令 "package": "vue-cli-service build --target lib ./src/lib/index.js --name dd-ui-library --dest dd-ui-library"  打包命令解释： --target lib 关键字 指定打包的目录 --name 打包后的文件名字 --dest 打包后的文件夹的名称  然后执行打包命令： npm run package 

npm install copy-webpack-plugin@4.6.0  vue.config.js中配置打包插件，将utils完整目录打入包内  const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path') module.exports = {   publicPath: "./",   assetsDir: 'static',   productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap   lintOnSave: false, // 是否开启eslint保存检测   configureWebpack: {     plugins: [       new CopyWebpackPlugin([         {           from: path.resolve(__dirname, 'src/utils'),           to: path.resolve(__dirname, 'dd-ui-library/utils'),           ignore: ".*"         }       ])     ]   } } 

发布到npm

cd ./dd-ui-library  npm init -y 初始化package.json  设置npm源：npm config set registry=https://registry.npmjs.org  添加npm账号：npm login    发布：npm publish (不能重复发布同一个版本号，需修改package.json中version