基於vuejs2+webpack2+vuxui2多頁面架手腳，支援二級目錄

藍狐鍋發表於2017-04-09
VueJSWebUXUI

前言

vue2.0上線已經有一段時間了，現在vue2.1也都已經發布了，是時候來更新基於vue的多頁面腳手架了。

相信用vue的童鞋，很多一部分在用於spa（單頁面）專案，也不排除傳統的多頁面專案，我們就用vue開發了多頁面的webapp，相對於spa開發效率更高，使用單頁面或者多頁面，最終還是看專案的需求啦。

這一次我們基於vuejs2+webpack2+vuxui2(好222的專案)重新發布了全新的vue腳手架，同時還支援二級目錄，以解決頁面比較多時，便於歸類查詢的問題。基於webpack2，構建速度高。ajax獲取資料，使用axios，當然還有其他的優化，我們們先看看demo唄。

demo地址：
v.lanchenglv.com/demo/vue2-c…

github地址：
github.com/bluefox1688…

此版僅支援vu2.0，如果需要vue1.0多頁面腳手架，請訪問分支
github.com/bluefox1688…

2.0的主要功能

  1. 全域性統一使用的模組Lib.js庫
  2. 支援字型圖示
  3. 構建時，增加對css打包的支援
  4. 提取公共模組
  5. 多頁面可使用vue-router2路由
  6. 可自定義頁面模組名，例如 http:// localhost:8091/views/home/list.html，views就是我們線上的模組名，1.0版只能固定的
  7. 支援二級目錄，便於歸類，1.0版本暫時僅支援一級目錄
  8. 模組下靜態檔案可直接呼叫
  9. 傳送ajax請求，使用axios庫，簡單封裝了一個庫，為了減少學習成本，封裝引數基本與JQ ajax一致，如果不需要可直接刪除
  10. 整合了vue最流行的UI框架，vuxui2.x，github star 已接近8K了，元件非常全面，並且作者一直有維護，從0.x版本我就開始有使用了，具體瞭解更多，請訪問官網 vux.li
  11. 基於webpack2，更高的構建速度，包體積更小，全面支援ES6 Modules
  12. 熱更新，效率提升神器呀
  13. 支援Lesscss預處理
  14. 獲取多頁面的url引數的方法
  15. 全域性註冊vue全域性過濾器的方法

Build Setup

clone到本地倉之後，自行npm **，都是老司機了，這裡也不重複了。

# 安裝依賴
npm install

# 除錯環境 serve with hot reload at localhost:8091
npm run dev

# 生產環境 build for production with minification
npm run build複製程式碼

本地預設訪問埠為8091，需要更改的童鞋請到專案目錄檔案config/index.js修改。

目錄結構

webpack
 |---build
 |---src
     |---assets    #資源
     |---css/common.css  #css
     |---font/    #字型圖示
     |---js/common.js    #自己定義的全域性通用事件
     |---js/conf.js    #專案的配置
     |---js/Lib.js    #暴露介面給元件呼叫
     |---js/vueFilter.js    #註冊vue的全域性過濾器    
 |---components 元件
     |---Button.vue  按鈕元件
     |---hb-head.vue  head元件
|---views    #各個頁面模組，模組名可以自定義哦！
     |---home    #一級目錄
        |---list    #二級目錄
             |---list.html
             |---list.js
             |---listApp.vue
     |---vuxDemo    #一級目錄
        |---button    #二級目錄
             |---button.html
             |---button.js
             |---buttonApp.vue    
        |---calendar    #二級目錄
             |---calendar.html
             |---calendar.js
             |---calendarApp.vue         
......複製程式碼

此次2.0版本也優化也可以自定義模組的名稱，1.0版時，無法自定義模組名。

例如 http:// localhost:8091/views/home/list.html，views就是我們線上的模組名，如需修改請到專案目錄檔案config/index.js修改moduleName引數，修改這裡的配置的同時，也要同時重新命名/src/views的這個資料夾名稱，是否會報錯的。

從目錄結構上，各種元件、頁面模組、資源等都按類新建了資料夾，方便我們儲存檔案。其實我們所有的檔案，最主要都是放在views資料夾裡，以資料夾名為html的名稱。
例如

|---vuxDemo    一級目錄
 |---button    二級目錄
   |---button.html
   |---button.js
   |---buttonApp.vue複製程式碼

就是我們訪問時的地址：

http://localhost:8091/views/vuxDemo/button.html複製程式碼

在view裡二級資料夾，一個資料夾就是一個html，js``vue``html 都統一放在當前資料夾裡，當然你也可以繼續放其他的資源，例如css、圖片等，webpack會打包到當前模組裡。

還有一點要注意的，所有的目錄都要求為二級，不能一個目錄下為一級，另一個目錄下有二級。

Lib.js庫使用

我們做多頁面開發，那肯定會涉及到全域性都能呼叫的公共庫，或者是把別人封裝的庫也一起打包在全域性公共模組裡。

如果看過原始碼的童鞋，在*.vue頁面裡，都統一import了一個檔案

import Lib from 'assets/js/Lib';複製程式碼

這就是全域性統一公共模組，我們先看看Lib.js裡的程式碼

# 匯入全域性的css
require('assets/css/common.css');
# 匯入全域性的站點配置檔案
import C from './conf';
# 匯入全域性的共用事件
import M from './common';

export default{
    M,C
}複製程式碼

在Lib.js的M、C都是事件呼叫簡寫。例如我們現在想呼叫APP的名稱，在.vue裡可以這麼寫

import Lib from 'assets/js/Lib';
Lib.C.appname;  #藍橙綠複製程式碼

只需要在*.vue裡匯入import Lib from 'assets/js/Lib';'，就可以使用全域性模組了。
當然你還可以在Lib做一些程式判斷，例如許可權判斷等。

公共模組

我們通常會把常用的庫都打包成公共模組，CommonsChunkPlugin 外掛，是一個可選的用於建立一個獨立檔案(又稱作 chunk)的功能，這個檔案包括多個入口 chunk 的公共模組。最終合成的檔案能夠在最開始的時候載入一次，便存起來到快取中供後續使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的程式碼從快取中取出來，而不是每次訪問一個新頁面時，再去載入一個更大的檔案。

不同的專案，使用到的外掛庫數量有所不同，我們可以調整minChunks以達到公共模組的大小，檔案路徑為/build/webpack.prod.conf.js，cart+F查詢minChunks引數，minChunks: 4 意思代表為至少被4個頁面引用了，就打包進入公共模組，具體的使用方法，可以再詳細瞭解webpack中文文件。www.css88.com/doc/webpack…

存在的問題

1、多頁面可以使用vue-router路由，但是無法使用按需載入，即懶載入，研究過在多頁面的路由裡按需載入，但從未成功，如果有童鞋研究成功了，可以發lssues一起交流哈。

2、暫時還沒有做css自動補字首

3、......

結束言

此vue多頁面腳手架，並不侷限於vux ui 框架，但現在的UI框架都要自己對webpack簡單配置下。

生命在於折騰，理想還是要有的，萬一實現了呢。

有問題隨時Issues哈！

文章首發地址：

lanchenglv.com/article/201…

相關文章