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 文件剖析

<font color=’cornflowerblue’>1. 利用 node 中 importComponents 自动化配置路由 </font>

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}

    })

  });

}

<font color=’cornflowerblue’>2.router.beforeEach 路由拦截器 </font>

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

})

数据申请 axios 封装

1. 装置 axios 依赖包

npm i axios

2. 封装 axios

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

<font color=’orange’> 代码示例：</font>

•   * 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);

​ <u> 获取浏览器字体默认值，设置等比比例 </u>

3. 加载 fontSize 文件

<font color=’orange’> 应用形式：将文件引入带 main.js 文件中即可 </font>

UI 框架引入

集体举荐应用 vue 开发的 UI 框架

1. 挪动端 UI 框架

VantUI: 目前应用过最好用的框架

vant 地址：https://youzan.github.io/vant/#/zh-CN/

2.PC 端框架

iViewUI:iView 是一套基于 Vue.js 的开源 UI 组件库，次要服务于 PC 界面的中后盾产品。

iView 地址：https://iview.github.io/