我們暫時給提取出來的腳手架取名叫vde-cli，通過vde-cli腳手架生成的組件庫工程目錄結構如下：

核心功能

組件庫

工程的packages文件夾就是用來存放組件庫里面的各種組件了，這里不需要通過手動創(chuàng)建文件的方式創(chuàng)建組件，直接通過一條創(chuàng)建組件的命令完成。每個組件都有一個單獨的組件文件夾，組件文件夾下都至少包含"index.vue"，"example.vue"，"readme.md"這三個文件，這幾個文件都是通過創(chuàng)建組件傳遞的參數(shù)加指定的模板生成，創(chuàng)建組件的命令如下：

npm run generate <componentName> <componentTitle>

兩個參數(shù)分別是組件的名稱和后面用來在文檔和例子工程里顯示的導航名稱。

組件庫的對外主文件是工程的src/index.js，只要是通過上面的命令創(chuàng)建的組件，這個文件都會自動更新（省去你手工更新的時間）

Doc文檔工程

Doc文檔工程就是用來展示你組件文檔的一個小型單頁面系統(tǒng)。組件的文檔就是存放在每個組件文件夾下的readme.md文件，我們通過vue-markdown-loader去解析這個文件變成一個vue組件也頁面中顯示。在你通過上面指令創(chuàng)建組件的時候，會自動更新Doc文檔工程的所有依賴組件的部分（不需要任何手工操作）

Example例子工程

Example例子工程跟Doc文檔工程類似，用來展示你組件的例子的小型單頁面系統(tǒng)，組件的例子就是存放在每個組件文件夾下面的example.vue文件。在通過指令創(chuàng)建組件的完畢，就可以在該文件里測試你寫的組件了。

上面的文檔工程和例子工程分別通過webpack-dev-sever起了一個對應的服務，添加組件和修改組件文件下的文件信息都會自動刷新這兩個應用。

用一張圖來表示整個大工程的流程圖如下：

主要實現(xiàn)方式

上面已經(jīng)介紹了整個大工程其實是由組件庫、文檔工程和例子工程組成的，當然最核心的東西還是組件了，所以一切還需要從創(chuàng)建組件開始說起：

所有的組件都存放在大工程的packages里面，也就是說packages是所有組件存放的根目錄（跟組件配置信息相關）。 首先需要說明的是，每個組件文件夾都至少包含組件主文件（index.vue）、組件例子文件（example.vue）、組件文檔文件（readme.md)這三個文件。每個組件所包含的這三個文件又是分別通過一個對應的模板文件生成，這三個模板格式可以根據(jù)自己的需求自定義，大致類似于：

通過創(chuàng)建組件的命令傳遞兩個參數(shù)，一個代表組件的名稱（創(chuàng)建組件的文件夾名稱），另外一個是組件的標題（用于文檔工程和例子工程的導航名稱顯示）。有了這兩個參數(shù)，我們就可以結合組件的模板文件生成對應的組件，然后將這些組件信息寫入gen/route.json里面，因為文檔工程和例子工程都非常依賴這些信息。 組件創(chuàng)建完畢有一個很重要的工作就是自動往文檔工程里面注冊新的組件信息（docs/main.js）和更新組件庫的對外主文件(src/index.js)，這兩個文件也分別是通過模板生成的，模板格式分別如下：

使用

只需要四條命令就能開啟一個自動化組件工程了：

1、全局安裝vde-cli模塊

npm install -g vde-cli

2、初始化工程

$ vde init <project-name>

3、安裝所需要模塊

$ npm install

4、啟動項目

$ npm run start

然后整個工程就能運行起來了，應用的時候可以根據(jù)實際需求修改組件相關的模板和加入自己的組件庫的其它配置信息就可以了。文檔工程和例子工程的路由等信息都會在通過創(chuàng)建組件命令的時候自動更新，你在更改組件的文檔和組件功能的時候，文檔工程和例子工程都會實時更新。

實際項目接入

這里推薦使用npm link的方式，在項目里npm link本地用vde init的那個工程即可。

總結

以上所述是小編給大家介紹的Vue項目組件化工程開發(fā)實踐方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論