Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案

我們暫時(shí)給提取出來(lái)的腳手架取名叫vde-cli，通過(guò)vde-cli腳手架生成的組件庫(kù)工程目錄結(jié)構(gòu)如下：

核心功能

組件庫(kù)

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

npm run generate <componentName> <componentTitle>

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

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

Doc文檔工程

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

Example例子工程

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

上面的文檔工程和例子工程分別通過(guò)webpack-dev-sever起了一個(gè)對(duì)應(yīng)的服務(wù)，添加組件和修改組件文件下的文件信息都會(huì)自動(dòng)刷新這兩個(gè)應(yīng)用。

用一張圖來(lái)表示整個(gè)大工程的流程圖如下：

主要實(shí)現(xiàn)方式

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

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

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

使用

只需要四條命令就能開啟一個(gè)自動(dòng)化組件工程了：

1、全局安裝vde-cli模塊

npm install -g vde-cli

2、初始化工程

$ vde init <project-name>

3、安裝所需要模塊

$ npm install

4、啟動(dòng)項(xiàng)目

$ npm run start

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

實(shí)際項(xiàng)目接入

這里推薦使用npm link的方式，在項(xiàng)目里npm link本地用vde init的那個(gè)工程即可。

總結(jié)

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