Vue搭建移动端WebApp

Posted 2021-09-10 Reaper爱编程

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue搭建移动端WebApp相关的知识，希望对你有一定的参考价值。

vue.js(2.x)搭建web项目

安装开发环境

1.安装node环境

下载地址：下载地址：https://nodejs.org/en/

2.vue版本和vue.cli3.x脚手架

1.全局安装vue-cli

npm install --global @vue/cli

2.命令行cmd进入创建项目的目录,完成配置

vue create [项目名]

3.启动项目

cd [项目根目录]

npm run serve

配置项目路由

1.创建router路由文件

1.在src根目录创建router.js配置

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);


const routes = [

  {

    path: "/",

   redirect: "/register",

  },


];





// 加载components目录下面的路由

importComponents(require.context(\'../components\', true, /\\.vue$/, \'lazy\'))



function importComponents(r) {

  r.keys().forEach(key => {

    routes.push({

      path: key.substring(key.indexOf(\'/\'), key.lastIndexOf(\'.\')),

      component: () => r(key),

      meta: {requireAuth: false}

    })

  });

}



const router = new Router({

  routes,

  scrollBehavior() {

    return {x: 0, y: 0} //路由跳转置顶

  }

});



// 路由拦截器

router.beforeEach((to,from,next) => {

next()

})



export default router;

2.router.js文件分析

1.利用node中importComponents自动化配置路由

importComponents(require.context(\'../components\', true, /\\.vue$/, \'lazy\'))



function* importComponents(r) {

  console.dir(r);

  r.keys().forEach(key => {

       routes.push({

     path: key.substring(key.indexOf(\'/\'), key.lastIndexOf(\'.\')),

      component: () => r(key),

     meta: {requireAuth: false}

    })

  });

}

2.router.beforeEach路由拦截器

//控制路由 比如说token的认证
router.beforeEach((to,from,next) => {

next()

})

数据请求axios封装

1.安装axios依赖包

npm i axios

2.封装axios

1.src根目录创建http文件以及index.js

代码示例：

  * import axios from \'axios\'
    import Store from \'../vuex/index\'
 
   const ConfigBaseURL = \'后端api地址\'
 
   //使用create方法创建axios实例
   export const Service = axios.create({
       timeout: 10000, // 请求超时时间
       baseURL: ConfigBaseURL,
       method: \'post\',
       headers: {
           \'Content-Type\': \'application/json;charset=utf-8\',
           Authorization:""
       },
       validateStatus: function (status) {
           return status >= 200 && status < 300; // 默认的
       },
   })
 
   /**
 
    * axios请求拦截器
      */
      let timerEnd,timestamp;
      Service.interceptors.request.use(function (config) {
      // 对所有POST请加密，必须是json数据提交，不支持表单
      timestamp = Date.parse(new Date());
      // Store.commit("showLoading");
 
      if (config.url == "/api/User/ClientLoginAndRegist"||config.url=="/api/User/IdCardExists") {
          return config
      }
      if (!sessionStorage.getItem("token")){// config.data = {
          //     ciphertext: Aes.EncryptData(config.data)
          // }
          config.headers.Authorization = "Bearer "+sessionStorage.getItem("token");


     return config;

     }
     // return config
     //TODO:加密
     if (config.method == "post" && config.headers["Content-Type"] != "multipart/form-data"&&sessionStorage.getItem("token")) {
             config.headers.Authorization = `Bearer  ${sessionStorage.getItem("token")}`;
             // config.data = {
             //     ciphertext: Aes.EncryptData(config.data)
             // }
             return config;
         }
         return config
     }, function (error) {
     // 对请求错误做些什么
     Store.commit("hideLoading");
     return Promise.reject(error);
     })

  /**

   * axios响应拦截器

   * */
     Service.interceptors.response.use(function (response) {
      // 后端返回字符串表示需要解密操作
      //TODO 解密
      // if (typeof (response.data.data) == "string") {
      //     response.data.data = JSON.parse(Aes.DecryptData(response.data.data));
      // }

      return response;
     }, function (error) {
      if (error&&error.response){
          switch (error.response.status) {
              case 400:
                  error.message="错误请求！"
                  break;
              case 401:
                  error.message="未授权,请重新登录！"
                  break;
              case 403:
                  error.message="拒绝访问！"
                  break;
              case 404:
                  error.message="请求错误，未找到资源！"
                  break;
              case 405:
                  error.message="请求方法未允许！"
                  break;
              case 500:
                  error.message="服务器错误！"
                  break;
              case 501:
                  error.message="网络未实现！"
                  break;
              case 502:
                  error.message="网络错误！"
                  break;
              case 503:
                  error.message="网络不可用！"
                  break;
              case 504:
                  error.message="网络超时！"
                  break;
              case 505:
                  error.message="http版本不支持请求！"
                  break;
          }
      }else {
          error.message="网络出现问题，请稍后再试！"
      }

  // 对响应错误做点什么
  Store.commit("hideLoading");
  return Promise.reject(error);
 })
```

移动端适配（rem）

1.新建fontSize.js

---assets
   --common
     --js
       --fontSize.js

2.原理：等比缩放

代码示例：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=750){
                docEl.style.fontSize = \'100px\';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + \'px\';
            }
        };

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(\'DOMContentLoaded\', recalc, false);

})(document, window);

获取浏览器字体默认值，设置等比比例