Vue 組件封裝并使用 NPM 發布的教程

來源：懂視網責編：小采時間：2020-11-27 22:06:38

Vue 組件封裝并使用 NPM 發布的教程

Vue 組件封裝并使用 NPM 發布的教程:正文開始 Vue 開發插件我們可以先查看Vue的插件的開發規范我們開發的之后期望的結果是支持 import、require 或者直接使用 script 標簽的形式引入，就像這樣： ps: 這里注意一下包的名字前綴是 unisoft ，組件的名字前綴是 uni import Un

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue 組件封裝并使用 NPM 發布的教程:正文開始 Vue 開發插件我們可以先查看Vue的插件的開發規范我們開發的之后期望的結果是支持 import、require 或者直接使用 script 標簽的形式引入，就像這樣： ps: 這里注意一下包的名字前綴是 unisoft ，組件的名字前綴是 uni import Un

ps: 這里我選擇了 use sass 因為之后開發組件會用到

目錄結構如圖:

├── src/                           // 源碼目錄
│   ├── packages/                  // 組件目錄
│   │   ├── switch/                // 組件（以switch為例）
│   │   ├── uni-switch.vue        // 組件代碼
│   │   ├── index.js               // 掛載插件
│   ├── App.vue                    // 頁面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // （所有）插件入口
├── index.html                     // 入口html文件

開發單個組件:

先看一下目標效果：

開始開發：

在 packages 文件夾下新建一個 switch 文件夾用來存放 switch 組件的源碼，繼續在 switch 文件夾中新建 uni-switch.vue 和 index.js 文件

uni-switch.vue 組件:

<template>
 <div class="uni-switch">
 <div class="wrapper">
 <span><slot></slot></span>
 <div :class="[{closed: !checked}, 'switch-box']"
 @click="handleChange(value)">
 <span :class="{closed: !checked}"></span>
 </div>

 <input
 type="checkbox"
 @change="handleChange"
 :true-value="activeValue"
 :false-value="inactiveValue"
 :disabled="disabled"
 :value="value"/>
 </div>
 </div>

</template>

<script>
 export default {
 name: "UniSwitch",
 data() {
 return {}
 },
 props: {
 value: {
 type: [Boolean, String, Number],
 default: false
 },
 activeValue: {
 type: [Boolean, String, Number],
 default: true
 },
 inactiveValue: {
 type: [Boolean, String, Number],
 default: false
 },
 disabled: {
 type: Boolean,
 default: false
 }
 },
 computed: {
 checked() {
 return this.value === this.activeValue;
 }
 },
 methods: {
 handleChange(value) {
 this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
 }
 }
 }
</script>

index.js:

// UniSwitch 是對應組件的名字，要記得在 moor-switch.vue 文件中還是 name 屬性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

好了基本完成了，但是為了將所有的組件集中起來比如我還有 select、 input、 button 等組件，那么我想要統一將他們放在一個文件這中便于管理

所以在 App.vue 同級目錄我新建了一個 index.js 文件

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果還有的話繼續添加

const components = [
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果還有的話繼續添加
]

const install = function (Vue, opts = {}) {
 components.map(component => {
 Vue.component(component.name, component);
 })
}

/* 支持使用標簽的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 install,
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果還有的話繼續添加
}

好了到這里我們的組件就開發完成了；下面開始說怎么打包發布到 npm 上

發布到 npm

打包之前，首先我們需要改一下 webpack.config.js 這個文件;

// ... 此處省略代碼
const NODE_ENV = process.env.NODE_ENV
module.exports = {
 // 根據不同的執行環境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
 output: {
 // 修改打包出口，在最外級目錄打包出一個 index.js 文件，我們 import 默認會指向這個文件
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: 'custom-ui.js',
 library: 'custom-ui', // 指定的就是你使用require時的模塊名
 libraryTarget: 'umd', // libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的
 umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
 },
 // ... 此處省略代碼
}

然后, 再修改package.json 文件:

// 發布開源因此需要將這個字段改為 false
"private": false,
// 這個指 import custom-ui 的時候它會去檢索的路徑
"main": "dist/unisoft-ui.js",

發布命令只有兩步驟:

npm login // 登陸 npm publish // 發布

完成之后我們就可以在項目中安裝使用了

在項目中使用unisoft-ui

在自己的項目中使用unisoft-ui, 先從 npm 安裝

npm install unisoft-ui -S

在 mian.js 中引入

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

在組件中使用:

<template>
 <div id="app">
 <h1>{{msg}}</h1>
 <uni-switch v-model="isSwitch">
 <span class="text">{{switchText}}</span>
 </uni-switch>
 </div>
</template>

<script>
 export default {
 name: 'app',
 data() {
 return {
 msg: 'welecom to unisoft-ui',
 isSwitch: false,
 }
 },
 computed: {
 switchText() {
 return this.isSwitch ? '開' : '關';
 }
 },
 }
</script>

注意: 在發布npm包之前要先修改 .gitignore 去掉忽略 dist, 因為我們打包的文件也需要提交；每次上到 npm 上需要更改版本號，package.json 里的 version 字段

總結

以上所述是小編給大家介紹的Vue 組件封裝并使用 NPM 發布的教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com