(1) 插件开发和发布

http://www.jianshu.com/p/d6855556cd75
http://www.jianshu.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)



---------------------------------------------------------------------
// 使用

[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: '{{firstName}} {{lastName}} aka {{alias}}',
  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')

Vue音乐播放器学习笔记(6) - Vue插件开发与发布 + ( Vue.extend扩展组件/实例构造器 ) + ( Vue.component注册/获取全局组件 ) + ( js对象 )