(1) 插件開發(fā)和發(fā)布
http://www.reibang.com/p/d6855556cd75
http://www.reibang.com/p/c5666298b8a6
http://blog.csdn.net/tank_in_the_street/article/details/73135410
http://www.cnblogs.com/yesyes/p/7588833.html
[1] install (Vue, options) { }
- 第一個參數(shù)是 Vue 構(gòu)造器 ,
- 第二個參數(shù)是一個可選的選項(xiàng)對象:
// plug.js
const plug = { // 定義一個對象
install (Vue, options) { // 需要擁有一個 install 方法
}
}
// 導(dǎo)出這個對象
export default plug
----------------------------------------------------------------
然后我們就可以通過 use的方式來使用
import plug from 'plug'
Vue.use(plug)
----------------------------------------------------------------
如果你想把 ( 組件 ) 或 ( 指令 )打包為一個插件來進(jìn)行分發(fā)彤侍，可以這樣寫：
import MyComponent from './components/MyComponent.vue'; // 組件
import MyDirective from './directives/MyDirective.js'; // 指令
const MyPlugin {
install(Vue, options) {
Vue.component(MyComponent.name, MyComponent) // 組件
Vue.directive(MyDirective.name, MyDirective) // 指令
}
};
export default MyPlugin;
loading組件的插件化：
// plugin/loadings/loadings.js
import Loading from '../../base/loading/loading.vue' // 引入loading組件
const LoadingsA = {
install(Vue, options) {
Vue.component('Loadingss', Loading) // 前面是插件名字，后面是組件
}
}
export default LoadingsA
---------------------------------------------------------------------
// main.js
import LoadingsA from './plugin/loadings/loadings'
Vue.use(LoadingsA)
---------------------------------------------------------------------
// 使用
<template>
<div class="rank" ref="rank">
排行頁面
<RankDetail v-show="aa"></RankDetail>
<div v-on:click="go">點(diǎn)擊</div>
<loadingss></loadingss> // 使用
</div>
</template>
[2] 打包插件
// webpack.config.js
module.exports = {
// entry: './src/main.js', // 入口文件逆趋，npm run dev和 npm run buid都從這里進(jìn)入
entry: './src/loading/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' // 打包后輸出的文件名
filename: 'loadings.js'
library: 'loadings', // library指定的就是你使用require時的模塊名盏阶，這里便是require('loadings')
libraryTarget: 'umd', //libraryTarget會生成不同umd的代碼,可以只是commonjs標(biāo)準(zhǔn)的，也可以是指amd標(biāo)準(zhǔn)的闻书，也可以只是通過script標(biāo)簽引入的名斟。
umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名脑慧。否則就使用匿名的 define。
},
[3] 發(fā)布到npm
package.json
// "private": true,
"private": false,
"license": "MIT", // 許可證
"main": "dist/loadings.js",
// main :超級重要 決定了你 import xxx from “vue-pay-keyboard”
// 它默認(rèn)就會去找 dist下的loadings.js 文件
"repository": { // 倉庫
"type": "git",
"url": "https://github.com/yucccc/vue-pay-keyboard"
},// 配置這個地址存放你項(xiàng)目在github上的位置 也尤為重要
----------------------------------------------------------------------------------
OK 一切搞定 發(fā)布npm吧 哦 記得寫一下readme
注冊好npm后 添加用戶
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
(2) Vue.extend ( options ) 擴(kuò)展實(shí)例構(gòu)造器砰盐。( 組件構(gòu)造器 )
也就是一個預(yù)設(shè)了部分選項(xiàng)的 Vue 實(shí)例構(gòu)造器闷袒，vue.extend 組件構(gòu)造器 需要傳入component進(jìn)行注冊
- Vue.extend( options )
- 參數(shù)：
{Object} options - 用法：
使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”楞卡。參數(shù)是一個包含組件選項(xiàng)的對象霜运。
data 選項(xiàng)是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)
// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({ // 參數(shù)是包含組件選項(xiàng)的對象
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創(chuàng)建 Profile 實(shí)例蒋腮，并掛載到一個元素上淘捡。
new Profile().$mount('#mount-point')
var apple = Vue.extend({ // 擴(kuò)展實(shí)例構(gòu)造器，(組件構(gòu)造器)
....
})
Vue.component('apple',apple) // 把構(gòu)造器池摧，全局注冊成組件
// 然后你可以作用到vue實(shí)例 或者 某個組件中的components屬性中并在內(nèi)部使用apple組件
如：
new Vue({
components:{
apple:apple
}
})
(3) Vue.component 注冊或獲取全局組件
https://segmentfault.com/q/1010000007312426
- Vue.component( id, [definition] )
- 參數(shù)：
{string} id
{Function | Object} [definition] - 用法：
注冊或獲取全局組件焦除。
注冊還會自動使用給定的id設(shè)置組件的名稱
// 注冊組件，傳入一個擴(kuò)展過的構(gòu)造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件作彤，傳入一個選項(xiàng)對象 (自動調(diào)用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件 (始終返回構(gòu)造器)
var MyComponent = Vue.component('my-component')
