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

時間 2019-12-07

標籤基於 vuejs2+webpack2+vuxui2 vuejs webpack vuxui 頁面手腳支持二級目錄简体版

原文原文鏈接

前言

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

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

這一次咱們基於vuejs2+webpack2+vuxui2(好222的項目)從新發布了全新的vue腳手架，同時還支持二級目錄，以解決頁面比較多時，便於歸類查找的問題。基於webpack2，構建速度高。ajax獲取數據，使用axios，固然還有其餘的優化，我們先看看demo唄。vue

demo地址：
http://v.lanchenglv.com/demo/...webpack

github地址：
https://github.com/bluefox168...ios

此版僅支持vu2.0，若是須要vue1.0多頁面腳手架，請訪問分支
https://github.com/bluefox168...git

2.0的主要功能

全局統一使用的模塊Lib.js庫github
支持字體圖標web
構建時，增長對css打包的支持ajax
提取公共模塊vue-router
多頁面可以使用vue-router2路由
可自定義頁面模塊名，例如 http:// localhost:8091/views/home/list.html，views就是咱們線上的模塊名，1.0版只能固定的
支持二級目錄，便於歸類，1.0版本暫時僅支持一級目錄
模塊下靜態文件可直接調用
發送ajax請求，使用axios庫，簡單封裝了一個庫，爲了減小學習成本，封裝參數基本與JQ ajax一致，若是不須要可直接刪除
整合了vue最流行的UI框架，vuxui2.x，github star 已接近8K了，組件很是全面，而且做者一直有維護，從0.x版本我就開始有使用了，具體瞭解更多，請訪問官網 https://vux.li
基於webpack2，更高的構建速度，包體積更小，全面支持ES6 Modules
熱更新，效率提高神器呀
支持Lesscss預處理
獲取多頁面的url參數的方法
全局註冊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中文文檔。http://www.css88.com/doc/webp...