这两天看vue和webpack,觉的vue组件的功能很强大,人人可以开发vue组件,并都能直接用别人的vue组件,组件就像是各个平台的库,简单纯粹;但是我在使用过程中有个问题,就是如何更能方便的用别人的vue组件,找了半天也没有找到比较方便的方式,于是我想着能否建立个平台如https://www.npmjs.com/ 一样能让人方便的找到自己想要的组件。

能实现的方式

  1. 完全建立一个新的平台,允许用户上传,分享,检索,版本管理,下载;

    这个实现难度比较大;

  2. 在现有的平台基础,如npmjs上想办法做一个库,这个库可以方便的引入别人的组件;

    这个目前还没有想到好的办法;

  3. 直接从github上下载别人的库;

    这个想法是我想到了Go的库管理可以直接从github import,个人觉的这种方式很是方便,也简单了很多;那就先实现这种方式

vue-installer

vue-installer 就是简单的实现可以直接从github上下载你所需要的vue组件;
使用方式也很简单,首先建议都使用vue-clie 生成统一的模板:

install

1
npm install vue-installer --save-dev

config

  • webpack.base.conf.js add alias @github to src/components dir
1
2
3
4
5
6
7
8
9
10
module.exports = {
...
resolve: {
alias: {
'@github': path.resolve(__dirname, '../src/components')
}
}
...
}
  • webpack.dev.conf.js add plugin
1
2
3
4
5
6
7
var vueInstaller = require('vue-installer');
plugins: [
...
new vueInstaller()
...
]

dafalut config:

1
2
3
4
5
6
7
8
9
10
11
plugins: [
...
new vueInstaller({
src: 'src', //main develop dir ; defalut is `src`
vue: ['.vue','.js'],//will deal files suffix ; defalut is `['.vue','.js']`
flag: '@github', //flag,it will use in vue or js files;defalut is `@github`
github: 'https://github.com',//github adress ; defalut is `https://github.com`
components: 'src/components'//components will download dir; defalut is `'src/components'`
})
...
]
  • use ‘@github’ flag in files,just like :
1
import Calendar from '@github/LLawlight/vue-calendar/src/components/Calendar'

it will download https://github.com/LLawlight/LLawlight.git /src to ‘src/components/LLawlight/LLawlight/src’