vue 組件自動下載器

#vue 組件自動下載器

這兩天看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

npm install vue-installer --save-dev

config

• webpack.base.conf.js add alias @github to src/components dir

module.exports = {
    ...
    resolve: {

        alias: {
            '@github': path.resolve(__dirname, '../src/components')
        }
    }
    ...
}

• webpack.dev.conf.js add plugin

    var vueInstaller = require('vue-installer');
   
    plugins: [
        ...
        new vueInstaller()
        ...
    ]

dafalut config:

    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 :

 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'