Vue封裝元件并釋出npm

install

Vue

的插件必須提供一個公開方法

install

，該方法會在你使用該插件，

也就是

Vue.use(yourPlugin)

時被調用。這樣也就給

Vue

全局注入了你的所有的元件。

你為什麼要二次封裝el元件?

• 提供開發效率
• 提供元件的複用性（元件邏輯較為複雜的時候，封裝可以讓下次複用更簡單）

第 1 章：元件封裝

使用方法如下：

• 在項目 / main.js

import ui2010 from 'ui-2010'; // 引入結構
import 'ui-2010/styles/ui2010.css'; // 引入樣式
Vue.use(ui2010);
           

• demo.vue 頁面

<template>
  <div class="">
    <h1>demo頁面</h1>
    <field-set :tel="tel">
      <h1>向slot插槽，填充内容</h1>
    </field-set>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      tel: '13213214'
    }
  },

}
</script>

<style scoped>
</style>

           

1.1 定義元件

src/components/ui-2010/field-set.vue

<template>
  <fieldset>
    <legend>2021的元件</legend>
    <h1>今天下大雨了</h1>
    <h2>{{ msg }}</h2>
    <h2>
      <b class="telColor">{{ tel }}</b>
    </h2>
    <slot></slot>
  </fieldset>
</template>

<script type="text/javascript">
export default {
  name: 'field-set',
  data () {
    return {
      msg: '首次封裝元件'
    }
  },
  props: {
    tel: {
      type: Number,
      default: () => {
        return 13245678492
      }
    }
  }
}
</script>

<style scoped>
.telColor {
  color: red;
}
</style>

           

1.2 建構install函數

src/ui-2010/index.js

import fieldSet from '../components/ui-2021/field-set.vue'

// Vue的插件模式需要暴露一個install的方法
const install = (Vue) => {
  Vue.component(fieldSet.name, fieldSet)
}

export default install;
           

1.3 在package.json配置打包路徑

模仿build打包指令：手動指定打包目錄 和 打包的檔案名稱

項目/package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build", // 将src目錄下的所有内容進行打包
    "lint": "vue-cli-service lint",
    "ui-2010": "vue-cli-service build --target lib ./src/ui-2010/index.js --dest u2010 --name ui2010" // 指定打包路徑、打包的名稱
  },
           

• --target lib

  關鍵字 指定打包的目錄

• --name

  打包後的檔案名字

• --dest

  打包後的檔案夾的名稱

在 項目根目錄運作指令：

npm run ui-2010

或者

yarn ui-2010

接着你會發現：在項目 / 自動建立

u2010檔案夾

，如圖：

然後在項目/

建立packages檔案夾

拷貝

u2010檔案夾

的檔案：

xxx.umd.js

和

xxx.css

放入

建立的packages檔案夾

然後在

packages

路徑下，運作指令：

npm init -y

最後修改檔案的命名，如下圖：

第 2 章：釋出到 npm

2.1 到npm上注冊一個賬号

2.2 将源切換成npm官方源

nrm ls       如果沒有nrm 使用 npm install nrm -g

nrm use npm  将源切換成npm官方源
           

2.3 登入

npm login     接着輸入：使用者名 密碼  郵箱
npm publish   釋出到遠端倉庫(npm)上
           

2.4 删除遠端倉庫的包

npx force-unpublish package-name '原因描述'