基於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 [email protected]

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