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

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

3.加载fontSize文件

应用形式：将文件引入带main.js文件中即可

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/