使用Vue搭建前端项目架构《转载》

一、创建Vue项目基础框架

1.使用vue cli脚手架创建项目的基础框架

具体vue的配置如下：

 

2.配置.gitignore文件=>在提交到GitHub时不要提交node modules文件

二、创建GitHub仓库

1.在GitHub上创建仓库

2.clone仓库到本地

3.将上面使用vue cli创建的项目基础框架文件复制到上面仓库目录中

4.选择性push代码（也可以后面的工作完成后再push）

三、完善项目架构

前期工作：

1.安装axios（向后台异步请求数据）

npm install --save axios vue-axios

然后在main.js中引入并使用

//引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
//使用axios
Vue.use(VueAxios, axios)

2.安装element-ui组件

npm i element-ui -S

然后在main.js中引入并使用

//引入axios
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用axios
Vue.use(ElementUI);

3.在根目录下创建.env.development开发环境配置文件，将开发环境的后端接口地址配置在这里

NODE_ENV = development
VUE_APP_API_URL=http://81.70.223.139:8091//后端接口地址

然后我们配置各种文件进行封装，在src目录下创建utils文件夹：

1.在utils文件夹中创建request.js，配置request文件，对axios进行二次封装，主要封装两个拦截器，请求(require)拦截器和响应(response)拦截器，不要忘了在main.js中引入=>import "@/utils/request.js";

（1）请求拦截器=>在请求发送前进行必要操作处理，相当于是对每个接口里相同操作的一个封装

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    config.baseURL = process.env.VUE_APP_API_URL;
    let tokenInfo = getToken();
    if (tokenInfo) {
      // tokenInfo = JSON.parse(tokenInfo);
      config.headers['Authorization'] = tokenInfo.token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

（2）响应拦截器=>在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    /* 
        res = {
            "code": "2200",
            "data": {
                state: "success"
            }
        } 
        res = {
            "code": "2401",
            "message": "参数不正确"
        } 
    */
    const res = response.data;
 
    // if the custom code is not 2200, it is judged as an error.
    if (res.code !== 2200) {
      Message({
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });
 
    //   // 2401: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 1401) {
        // to re-login
        MessageBox.confirm(
          "You have been logged out, you can cancel to stay on this page, or log in again",
          "Confirm logout",
          {
            confirmButtonText: "Re-Login",
            cancelButtonText: "Cancel",
            type: "warning",
          }
        ).then(() => {
        //   router.push("/login"); // 去登录页面
          Message.warn("你已被登出，请重新登录");
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res.data;
    }
  },
  (error) => {
    // console.log("err" + error); // for debug
    // Message({
    //   message: error.message,
    //   type: "error",
    //   duration: 5 * 1000,
    // });
    return Promise.reject(error);
  }
);

2.我们首先把浏览器永久存储(LocalStorage)与临时存储(SessionStorage)常用的方法封装起来，封装成一个对象，使得使用起来更方便

// 1、浏览器永久存储   window.localStorage
 
export const Local = {
  // 设置永久存储
  set(key, val) {
    window.localStorage.setItem(key, JSON.stringify(val));
  },
  // 获取永久存储
  get(key) {
    let json = window.localStorage.getItem(key);
    try {
      return JSON.parse(json);
    } catch (error) {
      return json;
    }
  },
  // 移除永久存储
  remove(key) {
    window.localStorage.removeItem(key);
  },
};
 
// 2、浏览器临时存储   window.sessionStorage
 
export const Session = {
  // 设置临时存储
  set(key, val) {
    window.sessionStorage.setItem(key, JSON.stringify(val));
  },
  // 获取临时存储
  get(key) {
    let json = window.sessionStorage.getItem(key);
    try {
      return JSON.parse(json);
    } catch (error) {
      return json;
    }
  },
  // 移除临时存储
  remove(key) {
    window.sessionStorage.removeItem(key);
  },
};

然后配置auth文件。目的是获取和设置授权（只限登录用户）和用户信息的文件，本项目采用的是存储在本地 SessionStorage 中

import { Session } from "./index";
import router from '@/router'
 
 
const TOKEN_KEY = "QM-TOKEN";
const USERINFO_KEY = "QM-USERINFO";
 
// token相关方法
export function getToken() {
  return Session.get(TOKEN_KEY);
}
export function setToken(token) {
  Session.set(TOKEN_KEY, token);
}
export function removeToken() {
  Session.remove(TOKEN_KEY);
}
 
// userInfo相关方法
export function getUserInfo() {
  return Session.get(USERINFO_KEY);
}
export function setUserInfo(userInfo) {
  Session.set(USERINFO_KEY, userInfo);
}
export function removeUserInfo() {
  Session.remove(USERINFO_KEY);
}
 
export function addRoutes(routes){
  router.addRoutes(routes)
}

3.配置main.js。

(1)把公用的，可以多次使用的变量或方法配置在混入 (mixin) 中，写在main.js里。这样，在应用的其他组件中都可以使用到该变量或方法。

Vue.mixin({
  data() {
    return {};
  },
  methods: {
    getAbsPath(imagePath) {
      return process.env.VUE_APP_API_URL + "/" + imagePath;
    },
  },
});

(2)配置过滤器(filter)，主要用来数据格式化。例如下面的显示金额格式化（保留两位小数）与日期的格式化。具体使用：{{ 数据 | 过滤器名 }}

Vue.filter("NumFormat", function(value) {
  value += "";
  if (!value) return "0.00";
  let intPart = Number(value).toFixed(0); //获取整数部分
  let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断
  let floatPart = ".00"; //预定义小数部分
  let value2Array = value.split(".");
  //=2表示数据有小数位
  if (value2Array.length === 2) {
    floatPart = value2Array[1].toString(); //拿到小数部分
    if (floatPart.length === 1) {
      //补0,实际上用不着
      return intPartFormat + "." + floatPart + "0";
    }
    return intPartFormat + "." + floatPart;
  }
  return intPartFormat + floatPart;
});
 
Vue.filter("dateFormat", function(date, fmt) {
  date = new Date(date);
  let ret;
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString(), // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(
        ret[1],
        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
      );
    }
  }
  return fmt;
});