前言

為什么要寫這篇文章?

給以后的移動(dòng)端項(xiàng)目留個(gè)模板

首先新起一個(gè)項(xiàng)目

vue init webpack projectName

解決適配問(wèn)題

安裝lib-flexible

npm i lib-flexible --save

引入lib-flexible

main.js引入

import 'lib-flexible/flexible.js'

安裝px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

修改build/utils.js, 在cssLoader變量中

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 32             // 設(shè)計(jì)稿的1/10   我所用設(shè)計(jì)稿寬為320px
    }
  }
  ...
}

// 在后面的函數(shù)中
// 修改 generateLoaders 函數(shù)中 const loaders這句
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

項(xiàng)目里使用設(shè)計(jì)稿標(biāo)注的px，編譯或者打包后會(huì)自動(dòng)轉(zhuǎn)化為rem

使用less

npm install less less-loader

在Vue-cli中使用lang="less"時(shí)報(bào)錯(cuò)：Module build failed: TypeError: this.getOptions is not a function at Object.loader
出現(xiàn)這個(gè)問(wèn)題的原因是less-loader版本過(guò)高，降級(jí)到5.0.0即可

npm install less-loader@5.0.0 --save-dev

main.js添加

import less from 'less'

Vue.use(less)

頂部進(jìn)度條

npm i nprogress -S

main.js

import NProgress from 'nprogress' //引入自定義css是為了覆蓋掉默認(rèn)的進(jìn)度條的顏色
import './assets/css/nprogress.css'
NProgress.configure({
    easing: 'ease',  // 動(dòng)畫方式    
    speed: 500,  // 遞增進(jìn)度條的速度    
    showSpinner: false, // 是否顯示加載ico    
    trickleSpeed: 200, // 自動(dòng)遞增間隔    
    minimum: 0.3 // 初始化時(shí)的最小百分比
})
router.beforeEach((to, from , next) => {
    // 每次切換頁(yè)面時(shí)，調(diào)用進(jìn)度條
    NProgress.start();
    next()
});
router.afterEach(() => {  
    // 在即將進(jìn)入新的頁(yè)面組件前，關(guān)閉掉進(jìn)度條
    NProgress.done()
})

nprogress.css

    #nprogress {
        pointer-events: none;
    }

  #nprogress .bar {
    /* 自定義顏色 */
    background: #FE571B;

    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;
  }

  /* Fancy blur effect */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #FE571B, 0 0 5px #FE571B;
    opacity: 1.0;

    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }

  /* Remove these to get rid of the spinner */
  #nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
  }

  #nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #FE571B;
    border-left-color: #FE571B;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
            animation: nprogress-spinner 400ms linear infinite;
  }

  .nprogress-custom-parent {
    overflow: hidden;
    position: relative;
  }

  .nprogress-custom-parent #nprogress .spinner,
  .nprogress-custom-parent #nprogress .bar {
    position: absolute;
  }

  @-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

路由懶加載(增加首屏加載速度)

router/index.js

routes: [
    {
        path: '/',
        name: 'index',
        component: () => import('@/views/index')
        // 或者
        //  component:resolve=>require(['@/views/index'],resolve)
    },
   //  ...
]

配置404頁(yè)面

修改router/index.js

    {
      path: "/404",
      name: "notFound",
       meta: {
            title: '404',
            auth:false,// 不需要登錄
        },
      component: () => import('../views/404.vue')
    }, 
    {
      path: "*", // 此處需特別注意置于最底部
      redirect: "/404"
    }

封裝axios請(qǐng)求

npm install --save axios

src文件夾下新建http文件夾，并在文件夾內(nèi)新建request.js
request.js

import axios from 'axios'
import router from 'vue-router'
import {auth} from "./auth";

/**
* 定義請(qǐng)求常量
* TIME_OUT、ERR_OK
*/
export const TIME_OUT = 5000;    // 請(qǐng)求超時(shí)時(shí)間
export const ERR_OK = true;      // 請(qǐng)求成功返回狀態(tài)，字段和后臺(tái)統(tǒng)一
// export const baseUrl = process.env.BASE_URL   // 引入全局url，定義在全局變量process.env中，開發(fā)環(huán)境為了方便轉(zhuǎn)發(fā)，值為空字符串

// 環(huán)境的切換
console.log('process.env.NODE_ENV:'+process.env.NODE_ENV);

// create an axios instance
export const service = axios.create({
    baseURL: config.BASE_API || process.env.VUE_APP_BASE_API,  
    //  process.env.VUE_APP_BASE_API :這種方式在config/dev.env.js或者prod.dev.env.js中配置VUE_APP_BASE_API 
    timeout: TIME_OUT, // 請(qǐng)求超時(shí)時(shí)間
    headers: {
        "X-Requested-With": "XMLHttpRequest",
        "content-Type": "application/json; charset=UTF-8",
        "Cache-Control": "no-cache",
        Pragma: "no-cache",
    },
});
service.defaults.baseURL = config.BASE_API;

// 封裝請(qǐng)求攔截
service.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        config.headers['accessToken'] = '';
        
        const token = auth.getToken();
        if (token) {
            config.headers["Authorization"] = token;
        }

        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 封裝響應(yīng)攔截，判斷token是否過(guò)期
service.interceptors.response.use(
    response => {
        const res = response.data;
       
        if (res.status === 200) {
            return Promise.resolve(res);
        }
        if (res.status === 401) { // 如果后臺(tái)返回的錯(cuò)誤標(biāo)識(shí)為token過(guò)期，則重新登錄
             // token過(guò)期移除token
             localStorage.removeItem('token')
             // 進(jìn)行重新登錄操作
             auth.removeToken();

            //  提示確認(rèn)框重新登錄
            return Promise.reject(res.message || "Error");

        }else{
            return Promise.reject(new Error(res.message || "Error"));

        }
        
    },
    error => {
        // return Promise.reject(error.response)
        if (error.response.status) { 
            switch (error.response.status) {                
                // 401: 未登錄
                // 未登錄則跳轉(zhuǎn)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑
                // 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath // 401后跳轉(zhuǎn)登錄頁(yè)  把當(dāng)前路由帶上 登錄后可直接回到該路由
                        }
                    });
                    break;
                // 403 token過(guò)期
                // 登錄過(guò)期對(duì)用戶進(jìn)行提示
                // 清除本地token和清空vuex中token對(duì)象
                // 跳轉(zhuǎn)登錄頁(yè)面                
                case 403:
                    // var toast = Toast.$create({
                    //     txt: '登錄過(guò)期，請(qǐng)重新登錄',
                    //     mask: true
                    // })
                    // toast.show()
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳轉(zhuǎn)登錄頁(yè)面，并將要瀏覽的頁(yè)面fullPath傳過(guò)去，登錄成功后跳轉(zhuǎn)需要訪問(wèn)的頁(yè)面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404請(qǐng)求不存在
                case 404:
                    // var toast = Toast.$create({
                    //     txt: '網(wǎng)絡(luò)請(qǐng)求不存在',
                    //     mask: true
                    // })
                    // toast.show()
                    break;

                // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
                default:
                    // var toast = Toast.$create({
                    //     txt: error.response.data.message,
                    //     mask: true
                    // })
                    // toast.show()
            }
        }
        return Promise.reject(error.response)
  }
)

export default service;

main.js

import axios from './http/request'
Vue.prototype.$axios = axios

使用方法:
然后就可以在項(xiàng)目中以 this.$axios 來(lái)進(jìn)行請(qǐng)求

// get請(qǐng)求參數(shù)需要 params：{}
this.$axios.get(`/search/list`, {
          params:{ 
              id:11
           }
        }).then((res) => {
})

// post請(qǐng)求
this.$axios.post(`scan/qr/code`, {
          loginCode: this.loginCode
        }).then((res) => {
})

// 假如上傳需要用到 BASE_API2
this.$axios.post(`/upload/file`, {
          loginCode: this.loginCode
        }, {baseURL: config.BASE_API2,}).then((res) => {
})

axios區(qū)分不同的接口環(huán)境

process.env.VUE_APP_BASE_API :
這種方式在config/dev.env.js或者prod.dev.env.js中配置VUE_APP_BASE_API

但是當(dāng)線上環(huán)境的測(cè)試環(huán)境不止一個(gè)時(shí)，用這個(gè)不方便實(shí)現(xiàn)。 

static文件夾下新增config.js

/**
 * devlopment
 * local本地 | dev白盒 ｜ uat1 ｜ uat2 ｜ prod生產(chǎn)
 */
 const devlopment = 'local'

 let config = {}
 
 if(devlopment === 'local'){
   config = { 
        BASE_API: 'http://localhost:8080',  // 后端api地址
        BASE_API2: 'http://localhost:8090',  
   }
 }
 
 if(devlopment === 'dev'){
    config = { 
        BASE_API: 'http://localhost:8080',  // 后端api地址
        BASE_API2: 'http://localhost:8090',  
    }
 }

使用

index.html添加

<script src="static/config.js"></script>


在請(qǐng)求的時(shí)候能使用到 BASE_API或者BASE_API2

路由鑒權(quán)

(1) router/index.js

給每個(gè)路由新增一個(gè)auth字段來(lái)判斷是否需要登錄

routes: [
    {
      path: '/',
      name: 'index',
      meta: {
        title: '首頁(yè)',
        auth:true,// 是否需要登錄
      },
      component: () => import('@/views/index')
    },
    {
      path: '/login',
      name: 'login',
      meta: {
        title: '登錄頁(yè)',
        auth:false,// 是否需要登錄
      },
      component: () => import('@/views/login')
    },
]

(2) main.js

router.beforeEach((to, from , next) => {
  /* 路由發(fā)生變化修改頁(yè)面title */
  if (to.meta.title) {
      document.title = to.meta.title
  }
  // 每次切換頁(yè)面時(shí)，調(diào)用進(jìn)度條
  NProgress.start();
  // 對(duì)路由進(jìn)行驗(yàn)證    
  if(to.matched.some( m => m.meta.auth)){  // 某路由需要登錄權(quán)限
    const ifLogin = localStorage.getItem('isLogin') 
    if(!ifLogin) { // 未登陸
        next({path:'/login'})
        NProgress.done()
    }else{
        next()
    }
  }else{
      next()
  }
});
router.afterEach(() => {  
    // 在即將進(jìn)入新的頁(yè)面組件前，關(guān)閉掉進(jìn)度條
    NProgress.done()
})

引用vconsole

移動(dòng)端項(xiàng)目調(diào)式怎么可以少了這個(gè)神器.

static文件夾下新建vconsole.js，
再去git上拷貝源碼下來(lái),在index.html里引入,vconsole地址：點(diǎn)這里

index.html

<script src="./static/vconsole.js"></script>
 或者
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>

<script>
        var vConsole = new VConsole();
</script>

解決移動(dòng)端點(diǎn)擊300ms延遲

npm i fastclick -S

main.js

import FastClick from 'fastclick'
FastClick.attach(document.body)

解決css移動(dòng)端字母或者文字大小有時(shí)會(huì)變化的問(wèn)題

App.vue

html{
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

谷歌下不支持小于12px，當(dāng)字體小于12px時(shí) 會(huì)變成12px 這個(gè)時(shí)候我們?cè)O(shè)置的rem及=就沒有效果了 設(shè)置text-size-adjust會(huì)解決這個(gè)問(wèn)題 禁用Webkit內(nèi)核瀏覽器的文字大小調(diào)整功能

設(shè)置全局公共組件

src / components 下新建index.js

import BaseTitle from "./BaseTitle";
import BaseModule from "./BaseModule";

const array = [
    BaseTitle,
    BaseModule
];

const baseComponents = {
    install(vue) {
        for (let i = 0; i < array.length; i++) {
            vue.component(array[i].name, array[i]);
        }
    },
};

export default baseComponents;

main.js

import baseComponents from './components'

Vue.use(baseComponents)

使用: 直接使用不需要import

<BaseTitle></BaseTitle>

強(qiáng)烈建議在components文件夾下只放置公共組件，通用組件，不要放置頁(yè)面組件，業(yè)務(wù)組件

解決頁(yè)面每次打開不能返回頂部位置

main.js中路由的前置守衛(wèi)里添加這句：

router.beforeEach((to, from , next) => {
  document.body.scrollTop = 0;
  // .......
})

打包后生成很大的.map文件的問(wèn)題

在config/index.js文件中，設(shè)置productionSourceMap: false,就可以不生成.map文件

查看打包后各文件的體積

npm run build --report

本模板框架gitee地址： https://gitee.com/apple0515/vue_h5_project

持續(xù)更新~~