Vue移动端项目搭建

先新起一个项目
vue init webpact projectName

安装vue UI库

npm install --save mint-ui

-引入

 import MintUI from 'mint-ui'
 import 'mint-ui/lib/style.css'
 Vue.use(MintUI)

引入lib-flexible

 npm i lib-flexible --save

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

引入px2rem-loader

npm install px2rem-loader

• vue-cli 2.0 脚手架引用
  引入lib-flexible和 px2rem-loader,打开build文件夹，编辑utils.js

  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: 37.5  //1rem=多少像素 这里的设计稿是750px。
       }
     }
   }
  

vue-cli 2.0 脚手架引用

 css: {
      postcss: {
        // options here will be passed to postcss-loader
        plugins: [require('postcss-px2rem')({
            remUnit: 75  //1rem=多少像素 这里的设计稿是750px。
        })]
      }
    }

项目里使用设计稿标注的px，编译或者打包后会自动转化为rem

使用less

npm i less less-save -S

再编辑webpack.base.conf配置less-loader

module: {
    rules: [
        {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader',
        },
        ...
    ]
  }

解决移动端点击300ms延迟

npm i fastclick -S

main.js

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

封装axios请求
npm i axios -S

/* eslint-disable */
import axios from 'axios'
import router from 'vue-router'
import Cookies from 'js-cookie'
/**
* 定义请求常量
* TIME_OUT、ERR_OK
*/
export const TIME_OUT = 5000;    // 请求超时时间
export const ERR_OK = true;      // 请求成功返回状态，字段和后台统一
// export const baseUrl = process.env.BASE_URL   // 引入全局url，定义在全局变量process.env中，开发环境为了方便转发，值为空字符串
// 环境的切换
console.log('process.env.NODE_ENV:'+process.env.NODE_ENV);
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'http://api-campus-stg1.pingan.com:8282';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api-campus.pingan.com';
}
// 请求超时时间
axios.defaults.timeout = TIME_OUT

// 封装请求拦截
axios.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        config.headers['accessToken'] = '';
        if(Cookies.getJSON('loginMsg')){
            config.headers['accessToken'] = Cookies.getJSON('loginMsg').token
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 封装响应拦截，判断token是否过期
axios.interceptors.response.use(
    response => {
        let {data} = response
        if (data.responseCode === 202) {    // 如果后台返回的错误标识为token过期，则重新登录
            // token过期移除token
            localStorage.removeItem('token')
        // 进行重新登录操作
        } else {
            return Promise.resolve(data)
        }
    },
    error => {
        return Promise.reject(error.response)
        if (error.response.status) { 
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                    // var toast = Toast.$create({
                    //     txt: '登录过期，请重新登录',
                    //     mask: true
                    // })
                    // toast.show()
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404请求不存在
                case 404:
                    // var toast = Toast.$create({
                    //     txt: '网络请求不存在',
                    //     mask: true
                    // })
                    // toast.show()
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    // var toast = Toast.$create({
                    //     txt: error.response.data.message,
                    //     mask: true
                    // })
                    // toast.show()
            }
        }
        return Promise.reject(error.response)
  }
)
export default axios 

使用方法:
main.js

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

路由懒加载(增加首屏加载速度)

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

404页面

routes: [
    {
        path: '*',
        name: '404',
        meta: {
            title: '404',
            auth:false,//需要登录
        },
        component:resolve=>require(['@/page/error'],resolve)
    }
]

路由鉴权
给每个路由新增一个auth字段来判断是否需要登录

routes: [
    {
        path: '/',
        name: 'index',
        meta: {
            title: '首页',
            auth:true,//需要登录
        },
        component:resolve=>require(['@/page/index'],resolve)
    },
]

main.js

router.beforeEach((to, from , next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title
    }
    // 每次切换页面时，调用进度条
    NProgress.start();
    // 对路由进行验证    
    if(to.matched.some( m => m.meta.auth)){
        if(!store.state.user.isLogin) { // 未登陆
            next({path:'/login'})
            NProgress.done()
        }else{
            next()
        }
    }else{
        next()
    }
});
router.afterEach(() => {  
    // 在即将进入新的页面组件前，关闭掉进度条
    NProgress.done()
})

其中store.state.user.isLogin 是vuex里来判断用户登录没,具体实现方式是登录后保存token等用户信息到cookie里(js-cookie插件),并设置过期时间为1天（以实际项目为准）然后后面每次请求会带上token，如果后台返回token过期的code，commit并设置isLogin为false，回到登录页.(不同项目判断有所不同,具体以项目为准)

npm i es6-promise -S

main.js

require("es6-promise").polyfill();

引用vconsole
移动端项目调式怎么可以少了这个神器.

static文件夹下新建vconsole.js，再去git上拷贝源码下来,在index.html里引入,vconsole地址：点这里
index.html

<script src="./static/vconsole.js"></script>
<script>
        var vConsole = new VConsole();
</script>

备注:静态文件放在static还是assets是有区别的,static下的文件不会被webpack处理,任何放在 static/ 中文件需要以绝对路径的形式引用，而assets会被打包到你的项目里,正因为这样,如果vconsole放在assets文件下引用,打包后会找不到路径。一句话总结: static放别人家的，assets放自己写的。

解决css移动端字母或者文字大小有时会变化的问题

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

谷歌下不支持小于12px，当字体小于12px时 会变成12px 这个时候我们设置的rem及=就没有效果了 设置text-size-adjust会解决这个问题 禁用Webkit内核浏览器的文字大小调整功能

打包
打包体积优化

npm install --save-dev webpack-bundle-analyzer

在webpack.prod.conf.js中增加以下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
 }

在 项目的 package.json 文件中注入如下命令，以方便运行她(npm run analyz)，默认会打开http://127.0.0.1:8888作为展示。
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
这样运行npm run build后浏览器会自动打开127.0.0.1:8888 展示如下页面：
代码压缩插件

npm install terser-webpack-plugin --save-dev

配置

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  //...
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true
      })
    ]
  }
};

设置productionSourceMap: false,就可以不生成.map文件

npm run build --report

借鉴地址：地址