使用vue在npm上發佈自己的ui組件包
可以提前去npm上搜自己要上傳的包名，以後在文件中都統一使用該包名，避免出錯。
npm官網
1.安裝
vue init webpack-simple jed-nui
jed-nui是我之前去npm搜過的包名，沒有重複的，於是項目就使用該名稱
2.進入項目，編寫組件
這裏有vue基礎的應該都不難
- 創建文件目錄
├── src
│ ├── packages //存放組件包
│ ├── button
| ├── index.js //配置文件
| ├── index.vue //組件
│ └── main.sass //組件樣式表
| ├── index.js //統一配置
大體結構如此
- 編寫組件
導出的時候要注意，要加上組件名稱（你以後在項目中要使用的名稱），比如像餓了麼ui中的el-button
export default {
name:"jed-button",
....
}
- 在app.vue中引入，看是否出現對應的效果
3.相關配置
3.1 配置插件
在組件包中的index.js中進行插件配置
import JedButton from './index.vue';
JedButton.install = Vue => Vue.component(JedButton.name, JedButton);//.name就是開始說的vue文件暴露出來的name名，JedButton整個組件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(JedButton);
}
export default JedButton;
我們都知道我們的包其實也就是一個插件，只有通過vue.use(插件名)才能使用。
具體參考 vue插件官方文檔
如果只有一個組件我們可以像上面那樣配置，但是如果組件太多了，我們可以建一個index.js進行統一配置
在packages根目錄下的index.js進行統一配置
import JedButton from “./button/index.js”
import JedForm from "./form/index.js"
//引入全部js文件
const components=[JedButton,JedForm]
const install=function(Vue,opts={}){
components.forEach((elem,i)=>{
Vue.component(elem.name, elem);
})
}
export default install
ok到這基本要完事了
3.2配置webpack.config.js
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
// entry: './src/main.js',
// output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
// filename: 'build.js'
// },
entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//路徑
filename: 'jed-nui.js',//打包之後的名稱
library: 'jed-nui', // 指定的就是你使用require時的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
},
這裏沒什麼要講的，主要是提醒打包後的文件名最好使用你npm發佈的包名。
3.3 配置package.json
{
"name": "jed-nui",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "hansu123 <[email protected]>",
"license": "MIT",
"private": false,//設置成公開的
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"keywords": [
"jed-nui"
],//隨便設置不設置
"main": "dist/jed-nui.js",
//關鍵，這裏的路徑一定是你webpack.congfig.js中的filename,否則你在項目引入的時候會報錯，cant resolve
//如果不設置的話，你在項目引入你發佈的包的時候需要import包的相對路徑，得自己找很麻煩
"files":[
"dist",
"src"
]
//打包後在包中存在的文件，這個你可以在安裝自己的包後在node_modules中查看
}
正常就改這些就ok了
修改.ignore
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
4.本地測試
- 打包
npm run build
npm pack
這樣會在項目生成一個tgz文件
- 放入另一個vue項目中測試
npm i ./jed-nui-1.0.0.tgz
- 引入
main.js中
import jedUI from "jed-nui"
Vue.use(jedUI)
在app.vue中使用
<jed-button type="danger">hansu</jed-button><br>
<jed-button type="warning">hansu</jed-button><br>
<jed-button type="danger" size="large">hansu</jed-button>
最終效果
5.npm發佈
5.1 先去官網註冊一個賬號
5.2 發佈
- npm login
- npm publish
不出意外你將會遇到如下錯誤：
- 問題1
請不要使用cnpm
cnpm 的倉庫只是 npm 倉庫的一個拷貝，它不承擔 publish 工作，所以你用 cnpm publish 命令會執行失敗的。
切換原鏡像
npm config set registry=http://registry.npmjs.org
切換淘寶鏡像
npm config set registry=https://registry.npm.taobao.org/
- 問題2
Unable to authenticate？
更新最新的npm
npm i -g npm
- 問題3
郵箱驗證
會彈出點擊發送郵件即可
最後執行
npm publish
搞定
6.本地修改index.html
打包過後src路徑會發生變化，所以我們需要在index.html中修改src的路徑，不然頁面會什麼都沒有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jed-nui</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/jed-nui.js"></script>
</body>
</html>
更多詳細組件製作請參考餓了麼UI