瞎說說
vue小白，要進行應用開發，有什么好用的UI框架，不用踩坑的?
想太多，不踩坑？？？不存在的！！！too young too simple～
a1：pc端我用element UI，感覺組件的API方法、屬性比較完善...😄
a2：哈？我個人感覺他的樣式有些生硬，不夠炫酷美觀😒，用iView吧，組件豐富，動畫效果cool~~~😁
a3：真的嗎？闊是有人說，iView組件雖然完美的把其他UI組件有的缺點完美避過，但是某某組件不夠人性化....💔
a4：用vue-beauty，夠方便...
a5：用N3 ，夠人性化...
a6：用Vue Antd，方法屬性封裝度夠高...
a7：用什么組件，我們自己寫😠，diy，隨心配～所以，那我們...
😄😄
😄😄
😄😄
😄😄😄😄😄😄😄
😄😄😄😄
😄😄
😄
還是需要用UI框架滴😝，但是必要的時候我們也需要自己diy一部分，畢竟，需求那么多，框架不是萬能的～
哈哈，冷幽默先扯到這里吧，我們回歸正題, 重點來了～ 【敲黑板ing.....】
進入正題
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 // 此處注意，組件需要添加name屬性，代表注冊的組件名稱，也可以修改成其他的
sumFunction.install = Vue => Vue.component(sumFunction.name, sumFunction);//注冊組件
/* 支持使用標簽的方式引入 Vue是全局變量時，自動install */
//if (typeof window !== 'undefined' && window.Vue) {
// install(window.Vue);
//}
export default sumFunction;
此處需要注意的是 install。 Vue的插件必須提供一個公開方法 install，該方法會在你使用該插件，也就是 Vue.use(yourPlugin)時被調用。這樣也就給 Vue全局注入了你的所有的組件。
2. 修改配置項：
（1）修改 webpack.config.js ，修改完成后執行npm run build 看下是否生效
// 執行環境 const NODE_ENV = process.env.NODE_ENV; console.log("-----NODE_ENV===",NODE_ENV); module.exports = { // 根據不同的執行環境配置不同的入口 entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/sumFunction/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'sumFunction.js', library: 'sumFunction', // 指定的就是你使用require時的模塊名 libraryTarget: 'umd', // 指定輸出格式 umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define },
library：指定的就是你使用require時的模塊名
libraryTarget：為了支持多種使用場景，我們需要選擇合適的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。顯而易見，我們應該選擇 UMD 格式。
有時我們想開發一個庫，如lodash，underscore這些工具庫，這些庫既可以用commonjs和amd方式使用也可以用script方式引入。
這時候我們需要借助library和libraryTarget，我們只需要用ES6來編寫代碼，編譯成通用的UMD就交給webpack了
// 發布開源因此需要將這個字段改為 false "private": false, // 這個指 import tlp_plugin_sum 的時候它會去檢索的路徑 "main": "dist/sumFunction.js",
（3）修改git上傳代碼，可以將.gitignore 去掉忽略dist, 把打包的文件也提交上去；
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
（6）每次上到npm上需要更改版本號，package.json 里的 version 字段