專案地址
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/513080.html
標籤：其他
上一篇：微前端總結