溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
正文開始
我們可以先查看Vue的插件的開發規范
我們開發的之后期望的結果是支持 import、require 或者直接使用 script 標簽的形式引入，就像這樣：
ps: 這里注意一下包的名字前綴是 unisoft ，組件的名字前綴是 uni
import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="..."></script>
Vue.use(UniSoftUI);
回到頂部
開發組件我們使用 webpack-simple 模板:
vue init webpack-simple <project-name>
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 上
打包之前，首先我們需要改一下 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">
<h2>{{msg}}</h2>
<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 發布的教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
