(1) 插件开发和发布
//www.greatytc.com/p/d6855556cd75
//www.greatytc.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) { }
- 第一个参数是 Vue 构造器 ,
- 第二个参数是一个可选的选项对象:
// plug.js
const plug = { // 定义一个对象
install (Vue, options) { // 需要拥有一个 install 方法
}
}
// 导出这个对象
export default plug
----------------------------------------------------------------
然后我们就可以通过 use的方式来使用
import plug from 'plug'
Vue.use(plug)
----------------------------------------------------------------
如果你想把 ( 组件 ) 或 ( 指令 )打包为一个插件来进行分发，可以这样写：
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">点击</div>
<loadingss></loadingss> // 使用
</div>
</template>
[2] 打包插件
// webpack.config.js
module.exports = {
// entry: './src/main.js', // 入口文件，npm run dev和 npm run buid都从这里进入
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标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
},
[3] 发布到npm
package.json
// "private": true,
"private": false,
"license": "MIT", // 许可证
"main": "dist/loadings.js",
// main :超级重要 决定了你 import xxx from “vue-pay-keyboard”
// 它默认就会去找 dist下的loadings.js 文件
"repository": { // 仓库
"type": "git",
"url": "https://github.com/yucccc/vue-pay-keyboard"
},// 配置这个地址存放你项目在github上的位置 也尤为重要
----------------------------------------------------------------------------------
OK 一切搞定 发布npm吧 哦 记得写一下readme
注册好npm后 添加用户
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
(2) Vue.extend ( options ) 扩展实例构造器。( 组件构造器 )
也就是一个预设了部分选项的 Vue 实例构造器，vue.extend 组件构造器 需要传入component进行注册
- Vue.extend( options )
- 参数：
{Object} options - 用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
// 创建构造器
var Profile = Vue.extend({ // 参数是包含组件选项的对象
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
var apple = Vue.extend({ // 扩展实例构造器，(组件构造器)
....
})
Vue.component('apple',apple) // 把构造器，全局注册成组件
// 然后你可以作用到vue实例 或者 某个组件中的components属性中并在内部使用apple组件
如：
new Vue({
components:{
apple:apple
}
})
(3) Vue.component 注册或获取全局组件
https://segmentfault.com/q/1010000007312426
- Vue.component( id, [definition] )
- 参数：
{string} id
{Function | Object} [definition] - 用法：
注册或获取全局组件。
注册还会自动使用给定的id设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
