vue 项目开发准备工作

本项目为vue+ ts，项目创建请看上一篇 vue+ts 项目创建

一、环境配置，可以根据项目情况配置多个

1、在根目录添加环境变量文件

        # # .build为生产环境，.test为测试环境（可以自定义）

 2、修改打包配置文件package.json

 # # # 跑npm run build 命令会出现以下文件表示配置成功了

 二、路由配置

1、安装vue-router

        npm install vue-router --save

2、在src里面添加router.ts文件

 3、在main.ts里面注册

 4、创建一个路由页面，这里创建的是login页面

 5、在router.ts中配置路由

import Vue from 'vue';
import Router from 'vue-router';
const Login = () => import('./views/login/login.vue');

Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },

  ],
});

export default router;

 6、项目启动后出现以下页面表示路由配置成功了

三、vue状态管理

1、安装vuex

 npm install vuex --save

2、在src里面创建store.ts文件

 3、在main.ts中注册

 4、编写store.ts文件，这里添加了user变量作为例子

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    user: {},
   
  },
  mutations: {
    updateUser(state, data) {
      state.user = data;
    },
  },
});

export default store;

5、在页面中使用

6、页面出现以下内容表示vue状态管理能正常使用了

四、http请求封装

1、安装axios  

npm install axios --save

2、在src里面创建axios.ts封装文件

 3、编写axios文件

import Axios, { AxiosResponse } from 'axios';
import router from '../router';
import { AxiosRequestConfig } from 'axios';

const blackApiList: string[] = [];

if (process.env.NODE_ENV === 'development') {
    window.API_ROOT = "";
} else if (process.env.VUE_APP_ENV === 'test') {
    window.API_ROOT = "";
} else if (process.env.VUE_APP_ENV === 'production') {
    window.API_ROOT = "";
}
const baseConfig: AxiosRequestConfig = {
    baseURL: window.API_ROOT,
};
const axios = Axios.create(baseConfig);
const ifAddAuthorization = (config: any): AxiosRequestConfig => {
    const token = localStorage.getItem('token');
    if (token && typeof (token) === 'string' && token !== 'undefined') {
        const url = config.url;
        let isBlack = false;
        for (const api of blackApiList) {
            if (url && url.includes(api)) {
                isBlack = true;
            }
        }
        if (isBlack) {
            delete config.headers.common.Authorization;
        } else {
            config.headers.common.Authorization = '' + 'Bearer ' + token;
        }
    } else {
        console.log(token);
    }
    return config;
};
axios.interceptors.request.use((config: AxiosRequestConfig) => {
    config = ifAddAuthorization(config);
    return config;
});

axios.interceptors.response.use((value: AxiosResponse) => {
    return value;
}, (error: any) => {
    console.log(error);
});

export default axios;

const resHandle = (VueComponent: any, data: any) => {
    return new Promise((resolve, reject) => {
        if (data.error_code !== 0) {
            if (data.error_code === 401) {
                VueComponent.$message({
                    type: "error",
                    message: data.msg
                });
                localStorage.removeItem("token");
                router.push("/login");
                reject(data.msg);
            } else {
                VueComponent.$message({
                    type: "error",
                    message: data.msg
                });
                reject(data.msg);
            }
        } else {
            resolve(data);
        }
    });
};

export { resHandle };

# # # 这里根据自己项目情况配置后端地址 

 # # # window变量需要在这个文件申明下，否则会报错

4、使用

# # 创建接口文件，我习惯把接口放在一起统一管理，这个可以按照个人习惯放

 # # 用的公司项目的登录接口，需要加密，所以用了base64

 5、以下图片表示http请求可以正常使用了

 

 # # # 到这里准备工作基本完成，大家再把项目中需要用的UI组件库引入就可以开始开发项目了！