封裝vue組件庫的兩種方法和形式：
一：是建立一個webpack-simple 項目
二：是在通過vue-cli腳手架建立webpack vue項目，這種項目有點冗余，可是我們對這種項目最熟悉
下面分別介紹兩種用法：
一：
1.首先先建立一個vue項目：
通過vue init webpack-simple，新建項目目錄如下：
箭頭指的是在項目打包后產生的文件（打包命令npm run build ）
2.在src下新建一個目錄用來存放組件源碼：
然后寫封裝的組件，比如radios/radio.vue
3.組件封裝完后新建index.js文件，作為我們組件庫的出入口，index.js內容如下：
上圖中comment應該換成components，也就是你自己命名的變量名
4.完了之后修改package.json文件，修改如下：
-
{
-
"name": "hz-components-ui",
-
"description": "uicomponents",
-
"version": "0.0.0",
-
"author": "wyx",
-
"license": "MIT",
-
// 因為組件包是公用的，所以private為false
-
"private": false,
-
"scripts": {
-
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-
},
-
// 配置main結點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑
-
"main": "dist/hz-components-ui.min.js",
-
// 項目官網的url
-
"homepage": "https://wuyxgit.github.io/vueBuildTest/dist/index.html#/",
-
"bugs": {
-
"url": "https://github.com/hamger/hg-vcomponents/issues"
-
},
-
// 指定代碼所在的倉庫地址
-
"repository": {
-
"type": "git",
-
"url": "git+https://github.com/wuyxgit/vueBuildTest.git"
-
},
-
"dependencies": {
-
"vue": "^2.5.11"
-
},
-
// 指定關鍵字
-
"keywords": [
-
"hz",
-
"components"
-
],
-
// 指定打包后發布到npm的文件名，沒指定則不傳，package.json是默認上傳的
-
"files": [
-
"dist",
-
"src/lib"
-
],
-
"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",
-
"vue-loader": "^13.0.5",
-
"vue-template-compiler": "^2.4.4",
-
"webpack": "^3.6.0",
-
"webpack-dev-server": "^2.9.1"
-
}
-
}
-
5.修改webpack.comfig.js文件：
-
entry: "./src/lib/index.js",
-
output: {
-
path: path.resolve(__dirname, './dist'),
-
publicPath: '/dist/',
-
// filename: 'build.js'
-
filename: "hz-components-ui.min.js",
-
library: "hzComponentsUI",
-
libraryTarget: "umd",
-
umdNamedDefine: true
-
},
箭頭指的是修改的部分，紅圈內的是新增部分
6.打包通過npm run build 命令，打包完成后產生dist文件，內容如下：
7.現在本地找一個項目測試是否可用，先執行命令 npm pack ，會產生一個壓縮包
箭頭所指的tgz文件，然后在測試項目中，通過npm install 路徑\文件全名
路徑是指壓縮包所在的絕對路徑，文件名指的是壓縮包的全名
8.安裝后直接在測試項目的入口文件mian.js內引入，和引入elementUI一樣
import 名稱 from ‘組件庫名’
Vue.use(名稱)；
然后在項目的任意組件中引用就行了，如果引入成功，則說明打包成功，接下來就是發布到npm上了
9.發布到npm上
回到組件庫項目的根目錄下：
1.npm login 登錄到npm上
2.npm version patch 這是把版本迭代一級，每次更新時都需要輸入這個命令，或者直接在package.json中修改版本號，只要與npm上的版本不同就行
3.npm publish 提交到npm上，至此就完成發布npm的全部了
項目訪問組件庫，就可以直接輸入 npm i/install 組件庫名稱來安裝，然后同上第八步就可以了
二：
1.首先通過vue init webpack 項目名 ，項目目錄如下：
2.封裝組件
在componetns文件下新建vue組件，放功能源碼，添加index.js，實現封裝后的組件的出入口
3.index.js添加內容如下：
-
import hzRadio from './radios/radio.vue'
-
import hzTimePicker from './timePickers/timePicker'
-
-
const components = {
-
install(Vue){
-
Vue.component('hzRadio',hzRadio);
-
Vue.component('hzTimePicker',hzTimePicker);
-
}
-
};
-
// 這里的判斷很重要
-
if (typeof window !== 'undefined' && window.Vue) {
-
window.Vue.use(components);
-
}
-
-
export default components;
4.修改webpack.base.conf.js和webpack.prod.conf.js
webpack.base.conf.js
webpack.prod.conf.js
修改生產環境的出口
修改生產環境的樣式文件，打包后所有的樣式都會在這個文件下
把下面的這兩個注釋掉，不然npm run build 打包時會失敗，
這個可以注釋也可以不注釋，全部注釋的話打包后不會產生index.html文件
5.修改package.json文件，添加項目源碼地址，demo測試地址，以及一些配置：
6.修改后打包：
剩下的7，8，9三步同上第一種方法的7，8，9三步！！！
三：報錯
E401 -------- 1.沒有權限，或者登陸出錯
2.或者是你要發布的包名已經被占用導致你沒有權限發布
3.或者2FA證書已失效，
關於前兩個重新登錄，或者把包名更改，重新發布，第三個原因按照此方法 https://go.npm.me/2fa-guide 來做，我的做法是在手機下載一個Authenticator ，手機應用商店里搜一下，下載完后點擊添加Google或者其他賬戶來掃描二維碼，然后會產生驗證碼，驗證碼有效性為30秒
血淚史呀，為了發布和項目成功引用可以說到處都是坑，網上的都是二把手，沒有一個可以的，即使安裝它提供的組件庫也不能在main.js內引用，哎。。。。。。。。。揮淚整理！！！！！！！！！！