基于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