vue組件篇（2）---封裝組件並發布到npm
瞎說說
vue小白，要進行應用開發：你們都用什麽UI框架，求指教，不想踩坑（想太多，不踩坑？？？不存在的！！！too young too simple～）
同學1：pc端我用element UI，感覺組件的API方法、屬性比較完善...??
同學2：哈？我個人感覺他的樣式有些生硬，不夠炫酷美觀??，用iView吧，組件豐富，動畫效果cool~~~??
同學3：真的嗎？闊是有人說，iView組件雖然完美的把其他UI組件有的缺點完美避過，但是某某組件不夠人性化....??
同學4：用vue-beauty，夠方便...
同學5：用N3 ，夠人性化...
同學6：用Vue Antd，方法屬性封裝度夠高...
同學7：用什麽組件，我們自己寫??，diy，隨心配～所以，那我們...
????
????
????
??????????????
????????
????
??
還是需要用UI框架的哈??，但是必要的時候我們也需要自己diy一部分，畢竟，代碼那麽多，寫不動了...
廢話也辣麽多，就先扯到這裏吧，我們回歸正題【敲黑板】,重點來了～
進入正題
1. 項目初始化
首先，要創建項目，封裝vue的插件，以前我們初始化vue工程都是用 webpack 的完整配置模板，也就是：
vue init webpack my-project
但是我們要寫的是一個簡單的vue組件，不需要依賴那麽多而龐大的配置，所以，這裏我們用簡介版本的webapck配置模板：也就是
vue init webpack-simple my-project
同學你說什麽？兩者的差異？給個鏈接，自己去看哈～ https://segmentfault.com/a/1190000011402931
1.0. 開始之前，說下需求：傳入兩個數，進行求和輸出。本次重點是講一下整體流程，先拿一個簡單的功能做個示範就好，畢竟覺我還想睡的??
1.1. 初始化完成後，我們來看下目錄：
1.2. 既然是封裝組件，那我們在src下面創建一個 myPlugin 文件夾規整一點吧，然後，我們在 myPlugin 下面放我們的插件，但是考慮到萬一要寫很多個的情況，這裏我們就區分一下吧（如果個人習慣不想區分也行，只是方便管理），當前組件的相關文件我們給一個 sumFuntion 文件夾名字，下面創建 sum-function.vue 和 index.js 先，結構變成下面這樣：
1.3. 接下來，老規矩，打開終端，目錄切換到當前開發目錄（這裏是tlp_plugin_sum），安裝依賴，啟動項目：
npm install
npm run dev
然後，我們來寫 sum-function.vue ，自然是我們的組件代碼：
<template>
<div class="calculate">
<p>{{a}}+{{b}}={{sum}}</p>
<input type="text" v-model="a" style="width:30px;text-align:center" @blur="sumFunc"/>
<span class="symbol">+</span>
<input type="text" v-model="b" style="width:30px;text-align:center" @blur="sumFunc"/>
<span class="symbol" @click="sumFunc"> = </span>
<span class="item">{{sum}}</span>
</div>
</template>
<script>
export default({
name:‘addFunc‘,
props:[‘num1‘,‘num2‘],
data() {
return{
a: this.num1 ? this.num1 : 0,
b: this.num2 ? this.num2 : 0,
sum: 0,
}
},
mounted() {
this.sumFunc();
},
methods:{
sumFunc() {
let a = Number(this.a);
let b = Number(this.b);
if(isNaN(a) || isNaN(b)) {
return;
}else{
this.sum = a + b;
this.$emit(‘getSumFromChild‘,this.sum);
}
}
}
})
</script>
<style>
.calculate{
width: 100%;
line-height: 26px;
.item{
}
.symbol{
}
}
</style>
1.4.寫好了組件，我們本地看下效果先：
（1）打開 src/App.vue 文件，將下面代碼復制，全部替換掉原來的代碼：
<template>
<div id="app">
<h2>calculate</h2>
<sum-function :num1="num1" :num2="num2" v-on:getSumFromChild="receiveChildSum"></sum-function>
<p>從子組件獲取到的值：{{sumFromChild}}</p>
</div>
</template>
<script>
import sumFunction from ‘../src/myPlugin/sumFuntion/sum-function‘; // 引入
export default {
name: ‘app‘,
data () {
return {
num1: 4,
num2: 5,
sumFromChild:0,
}
},
components:{ //註冊插件
sumFunction
},
methods:{
receiveChildSum(sum){ //自定義事件，接收子組件的和
this.sumFromChild = sum;
}
}
}
</script>
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
（2）執行 npm run dev 後頁面效果如下：
這樣我們的組件就寫好了，完美！接下來，要怎麽把它處理好，讓我們可以發布到npm上面去，可以向別人家的npm包一樣，散布到世界的每一個應用中??
1.5. 繼續我們sumFuntion／index.js 文件，目的：將該組件作為 Vue 插件
// sumFunction 插件對應組件的名字 import sumFunction from ‘./sum-function‘; // Vue.js 的插件應當有一個公開方法 install 。第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象 // 參考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6 // sumFunction.install = Vue => Vue.component(sumFunction.name, sumFunction);//註冊組件 /* 支持使用標簽的方式引入 */ if (typeof window !== ‘undefined‘ && window.Vue) { install(window.Vue); } export default sumFunction;
2. 修改配置項：
（1）修改 webpack.config.js ，修改完成後執行npm run build 看下是否生效
library：指定的就是你使用require時的模塊名
libraryTarget：為了支持多種使用場景，我們需要選擇合適的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。顯而易見，我們應該選擇 UMD 格式。Webpack 中指定輸出格式的設置項為 output.libraryTarget，其支持的格式有：
- “var” - 以一個變量形式輸出： var Library = xxx (default)；
- “this” - 以 this 的一個屬性輸出： this[“Library”] = xxx；
- “commonjs” - 以 exports 的一個屬性輸出：exports[“Library”] = xxx；
- “commonjs2” - 以 module.exports 形式輸出：module.exports = xxx；
- “amd” - 以 AMD 格式輸出；
- “umd” - 同時以 AMD、CommonJS2 和全局屬性形式輸出
// 發布開源因此需要將這個字段改為 false "private": false, // 這個指 import tlp_plugin_sum 的時候它會去檢索的路徑 "main": "dist/sumFunction.js",
3. 提交發布：
（1）在npm官網註冊賬號，地址：https://www.npmjs.com/，註冊好之後：
註意郵箱要驗證，會發送驗證鏈接到你的註冊郵箱，沒有驗證的話是不能發布代碼的
看一下package.json 中 author 盡量與 npm 賬戶一致
（2）切換到需要發包的項目根目錄下，登錄npm賬號，輸入用戶名、密碼、郵箱
npm login
（3）npm publish 執行發布：
npm publish
4. 下載安裝，應用：
（1）確認是否發布成功：官網你的賬號下面看一下有沒有已經發布的插件，或者：
npm install tlp_plugin_sum --save
//main.js中引入
import myPlugin from ‘tlp_plugin_sum‘
Vue.use(myPlugin);
5. 最後說一下註意事項，以及一些常見的錯誤：
（1）no_perms Private mode enable, only admin can publish this module
這是因為鏡像設置成淘寶鏡像了，設置回來即可
npm config set registry http://registry.npmjs.org
（2）npm publish failed put 500 unexpected status code 401
一般是沒有登錄，重新登錄一下 npm login 即可
（3）npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
包名被占用，改個包名即可。最好在官網查一下是否有包名被占用，之後再重命名
（4）you must verify your email before publishing a new package
郵箱未驗證，去官網驗證一下郵箱
（5）查看npm是否安裝成功：
npm who am i
vue組件篇（2）---封裝組件並發布到npm