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

　　同窗你說什麼？二者的差別？給個連接，本身去看哈～ http://www.javashuo.com/article/p-xmstxjpd-kg.html

　　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);//註冊組件

　// 標籤的方式引入，留到後面再另開新篇討論

  //const install = function(Vue, opts = {}) {

　//　　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了

　　 umdNamedDefine：會對 UMD 的構建過程當中的 AMD 模塊進行命名。不然就使用匿名的 define

　　

　　（2）修改package.json 文件：

　　

// 發佈開源所以須要將這個字段改成 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 字段