作業系統：windows 10
Node：14.7.0
npm版本：6.14.7
vue-cli：4.5.13

前言

該專案是一個【移動端】的 web 專案，使用 Vue.js 的原因有以下幾點：

hash 路由的特性可以解決各瀏覽器因為頁面的回傳不重繪的問題；
擁抱工程化前端專案開發環境；
提升自我及擴展公司 web 組的技術堆疊；

專案中代碼部分會在文章中后段具體說明，請大家耐心閱讀全文，

一、Vue.js 版本的選擇

考慮到整體的技術水平、兼容性要求和生態建設程度（說人話就是某度能解決多少問題）選擇了 Vue 2.x，

二、CSS擴展語言的選擇

選擇 Sass 的原因是其本身上手簡單外，因各大框架平臺也是默認 Sass 為CSS的擴展語言，所以不需要太多的理由跟著大廠走總沒錯，

三、UI框架的選擇

UI框架能提升開發效率，主要使用日歷、滾動選擇、彈窗、吐絲提示等常用組件，最終根據大家的喜愛程度選擇了 Vant UI，

四、如何提升專案打開速度

在 web 中，頁面打開速度是考量一個專案好壞非常重要的指標，因此在專案開始開發之前需要著重解決的問題（在主檔案 main.js 中參考大量的依賴是一個非常忌諱的事情），下面是我為減少打包后檔案過大的幾個要點：

Vue、vue-router、vuex 這些不可或缺的依賴檔案采用排除合并打包的方式；
專案默認的配置是會將小于 10k 的圖片轉為 base64 編碼的方式，當圖片過多的時候會導致檔案非常大，則調整 5k 以上的檔案都不轉為 base64 編碼；
路由懶加載（常見的優化方式）；
UI框架組件按需加載（這是必須的）；

五、專案目錄結構規劃

專案根目錄
    ├── public                  // 公共依賴
    ├── src                     // 專案檔案
    │   ├── assets              // ├── 靜態資源
    │   ├── components          // ├── 通用組件
    │   ├── pages               // ├── 業務頁面
    │   ├── request             // ├── 請求axios配置
    │   ├── router              // ├── 路由配置
    │   ├── store               // ├── 全域狀態管理Vuex
    │   ├── main.js             // ├── 專案入口檔案
    ├── vue.config.js           // 專案組態檔
    └── README.md               // 專案自述檔案

六、專案原始碼示例及說明：

1. Vue、vue-router、vuex 檔案排除合并打包

a) public/index.html 檔案修改檔案的參考方式

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- head部分代碼省略 -->
  </head>
  <body>
    <div id="app"></div>
    <% if(process.env.NODE_ENV === 'development'){ %>
        <!-- 開發環境參考未壓縮的檔案，方便使用 Vue.js devtools 工具除錯-->
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.js"></script>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.js"></script>
    <% }else{ %>
         <!-- 非開發環境參考壓縮的檔案，提高加載速度 -->
        <script type="text/javascript" src="<%= BASE_URL %>js/vue.2.6.11.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/vue-router.3.5.1.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/vuex.3.6.2.min.js"></script>
    <% } %>
  </body>
</html>

b) /vue.config.js 檔案設定排除不打包檔案

module.exports = {
    // ...
    configureWebpack: {
        /* 排除不打包的檔案，解決主檔案過大的問題 */
        externals: {
            'vue': 'Vue',
            'vue-router':'VueRouter',
            'vuex':'Vuex'
        }
    },
    // ...
}

2. /vue.config.js 檔案設定5K以上的圖片檔案不參與打包

module.exports = {
    // ...
    /* 調整行內檔案的大小限制，讓小圖片不轉為base64 */
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 5120 }))
    },
    // ...
}

3. Vant UI 設定按需引入

檔案：傳送門

//  /babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

4. 專案入口檔案原始碼

a) /src/main.js

import Vue from 'vue'
import App from './App.vue'
// router
import router from './router/index'
// vuex
import store from './store/index'
// babel ES6編譯
import 'babel-polyfill';

// 自定義全域方法 iGlobal
import iGlobal from './assets/js/iGlobal'
Vue.use(iGlobal);

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

b) /src/App.vue

<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
import { Toast } from "vant";
export default {
    name: "App",
    computed:{

    },
    components: {
        
    },
    created(){
        // 提示彈窗專案中使用頻率非常高，掛載在 window 物件，方便各 JS 檔案中呼叫
        window.Toast = Toast;
    },
    mounted(){

    }
};
</script>

<style lang='scss'>
// flex 布局盒子
@import '@/assets/css/helang-flex.scss';
//公共樣式
@import '@/assets/css/mobile.scss';
</style>

5. 路由檔案原始碼

a) /src/router/index.js 路由入口檔案

// 配置路由相關的資訊
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.通過Vue.use(插件), 安裝插件
Vue.use(VueRouter);

// 導航路由
import HomeRouter from './pages_home'
// 首頁路由
import IndexRouter from './pages_index'
// 例外路由
import ErrorRouter from './pages_error'

const routes = [
    ...HomeRouter,
    ...IndexRouter,
    ...ErrorRouter
]

// 2.創建VueRouter物件
const router = new VueRouter({
    mode:'hash',
    // 配置路由和組件之間的應用關系
    routes,
    // 使用前端路由，當切換到新路由時，想要頁面滾到頂部
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { x: 0, y: 0 }
        }
    }
})

// 路由全域前置守衛，需登錄頁面優先攔截跳轉至登錄
router.beforeEach((to, from, next) => {
    // 設定路由權限
    if(/^\/(home|user|index)/.test(to.path)){
        if(window.iGlobal.isLogin()){
            next();
        }else{
            next({
                path:'/login',
                replace: true
            })
        }
    }else{
        next();
    }
    
})

// 路由全域后置鉤子，設定標題
router.afterEach((to) => {
    // 設定標題
    document.title = to.meta.title || 'Vue 專案實戰';
})

// 3.拋出 router 物件
export default router

b) 頁面路由檔案示例

let pagesRouter = [
    {
        path: '*',   // 頁面未找到
        component: ()=>import('@/pages/error/404.vue'),
        meta: { 
            title:'頁面未找到'    
        }
    }
]

export default pagesRouter

6. /src/store/index.js vuex 原始碼示例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        // ...
    },
    mutations: {
        // ...
    }
})

export default store

7. request 請求 axios.js

a) /src/request/index.js 請求入口檔案原始碼

// 配置路由相關的資訊
import axios from 'axios'
// 序列化請求
import Qs from 'qs'

const service = axios.create({
    //...
    timeout: 5000 // 請求超時時長
})

// 公共引數
const publicParams = {
    // ...
    terminal:'web'
}

// 添加請求攔截器
service.interceptors.request.use(function (request) {
    if(/^post$/i.test(request.method)){
        let data = {};
        if(request.data){
            data = request.data;
        }
        // POST 請求將 公共引數添加到請求 data 物件中
        request.data = {...publicParams,...data};
    }else if(/^get$/i.test(request.method)){
        let data = {};
        if(request.params){
            data = request.params;
        }
        // GET 請求將 公共引數添加到請求 params 物件中
        request.params = {...publicParams,...data};
    }
    // 在發送請求之前做些什么
    // request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    // POST請求需要序列化為字串
    if(/^post$/i.test(request.method)){
        request.data = Qs.stringify(request.data);
    }

    // 添加用戶簽名資訊，可自行修改
    let access = window.iGlobal.getAccess(request.url);
    request.headers = {...access,...request.headers}
    
    return request;
}, function (error) {
    // 對請求錯誤做些什么，拋出錯誤
    return Promise.reject(error);
});

// 添加回應攔截器
service.interceptors.response.use(function (response) {
    // 對回應資料做點什么
    return response.data;
}, function (error) {
    // 對回應錯誤做點什么
    return Promise.reject(error);
});


/* axios 請求庫全域配置 */
service.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';

export default service;

b) /src/request/api/login.js 具體業務介面檔案原始碼

import request from '../index'

// 用戶/手機號密碼登陸
let login = (params)=>{
    return request.post('/api/login',params)
}

export default {
    login,
}

c) 頁面使用 axios 請求原始碼示例

<script>
// 參考 登錄請求介面檔案
import loginApi from '@/request/api/login'
export default {
    name: "userLogin",
    data() {
        return {
            // ... 
        };
    },
    mounted() {
       
    },
    methods: {
        login:function(){
            // ...
            loginApi.login({
                // ... 登錄引數
            }).then((res)=>{
                // ... 登錄成功
            }).catch((err)=>{
                // ... 登錄失敗
            })
        }
    }
};
</script>

專案中未將 axios.js 在 main.js 中參考是為降低打包后的 chunk-vendors-*.js 入口檔案大小（實測能降低30KB左右），提高首頁加載速度，

8. 專案通用方法 iGlobal.js 原始碼

let iGlobal = {
    // 獲取授權
    getAccess(uri){
        // ...
    },
    /* 
        獲取環境
        dev:開發，test:測驗，release:生產
    */
    getENV(){
         // ...
    },
    // 獲取用戶資訊
    getUserInfo(keyName = undefined){
         // ...
    },
    // 獲取用戶令牌
    getUserToken(){
         // ...
    },
    // 是否登錄
    isLogin(){
        let user  = this.getUserInfo();
        return !!user;
    },
    // 運行環境
    environment(){
        let environment = 'browser'
        let _UA = window.navigator.userAgent;
        if(/QQ\/\d/i.test(_UA)){
            environment = 'mqq';    // 手機QQ
        }else if(/micromessenger/i.test(_UA.match(/MicroMessenger/i))){
            environment = 'wechat';    // 微信
        }
        return environment;
    },
    // 設備標識
    terminal(){
        let _UA = window.navigator.userAgent;
        let terminal = '';
        if (/Android|BlackBerry/i.test(_UA)) {
            terminal = 'android';
        } else if (/webOS|iPhone|iPad/i.test(_UA)) {
            terminal = 'ios';
        } else if (/macintosh|mac os x/i.test(_UA)) {
            terminal = 'mac';
        } else {
            terminal = 'windows';
        }
        return terminal;
    },
    /**
     * 添加js腳本檔案
     * url:檔案地址，name:JS的變數名，比如 jQuery 是 $，
     * 該方法很重要，為了動態添加一些第三方SDK檔案使用
     */
    appendScript(url = undefined,name = undefined){
        // ...
        // 請查看文章結尾 [附錄] 原始碼
    },
    
    /** 常用正則 */
    regExps:{
        email: /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[.]{1}[0-9a-zA-Z]+[.]?[0-9a-zA-Z]+$/, //郵箱
        mobile: /^(?:1\d{2})-?\d{5}(\d{3}|\*{3})$/, //手機號碼
        qq: /^[1-9][0-9]{4,9}$/, //QQ
        befitName: /^[a-z0-9A-Z\u4e00-\u9fa5]+$/, //合適的用戶名，中文,字母,數字
        befitPwd: /^[a-z0-9A-Z_]+$/, //合適的密碼，字母,數字,下劃線
        allNumber: /^[0-9]+.?[0-9]$/ //全部為數字
    },
    showLoading(message = '提交中'){
        window.Toast.loading({
            message: message,
            forbidClick: true,
            duration: 0,
        });
    }
}

/**
    把 iGlobal 掛載到 Vue.prototype 中，屬性名為 iGlobal，同時掛載到 window 瀏覽器全域物件，方便非 vue 實體方法呼叫
    頁面 Vue 檔案中呼叫方式 this.iGlobal.*
    非 頁面 Vue 檔案呼叫方式 window.iGlobal.*
 */
let install = (Vue) => {
	window.iGlobal = Vue.prototype.iGlobal = iGlobal;
}

// 匯出 install 方法，可使用 Vue.use() 這種裝逼方式掛載
export default install;

9. 專案rem計算&全域flex 布局檔案

rem計算：https://mydarling.gitee.io/resource/files/helang-flexible.js
flex布局：https://mydarling.gitee.io/resource/files/helang-flex.scss

10. 瀏覽器兼容性

// /package.json

{
  //...
  "browserslist": [
    "last 4 version",
    "IE 10"
  ]
}

附錄

1. appendScript 方法原始碼

appendScript(url = undefined,name = undefined){
    return new Promise((resolve, reject)=>{
        if(name && name in window){
            resolve({
                code:2,
                msg:'檔案已被參考'
            });
            return;
        }
        if(!url){
            reject({
                code:0,
                msg:'無效的檔案地址'
            });
            return;
        }
        let jsEl = document.createElement('script');
        jsEl.type = 'text/javascript';
        jsEl.src = url;
        document.querySelector("#files-container").appendChild(jsEl);
        jsEl.onload = ()=>{
            resolve({
                code:1,
                msg:'檔案加載成功'
            });
        }
        jsEl.onerror = ()=>{
            reject({
                code:0,
                msg:'檔案加載失敗'
            });
        }
    })
}


// 方法使用示例
export default {
    // ...
    mounted(){
        this.iGlobal.appendScript('/js/jQuery.min.js,'jQuery').then(res=>{
            if(res.code > 0){
                // jQuery 相關代碼
                // $("#app").html()
            }
        });
    }
    // ...
}

作者：黃河愛浪 QQ：1846492969，郵箱：helang.love@qq.com

公眾號：web-7258，本文原創，著作權歸作者所有，轉載請注明原鏈接及出處

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301777.html

標籤：其他

上一篇：Vue2基礎

下一篇：JavaScript焦點處理（獲取焦點focus()、失去焦點blur()）

教你搭建一個頁面秒開的Vue專案

前言