開發一個項目，首先我們要看項目開發的文檔，有哪些要求。
文章目錄
1、創建項目
vue create 項目名
根據vue腳手架快速搭建項目，好用又便捷
2、根據項目要求安裝axios vant-ui element-ui
vant-ui應了當前客戶的審美觀
3、封裝axios、和api接口 。
在根目錄下創建文件分別是：
.env.development
NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'
.env.production
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'
.env.staging
NODE_ENV='staging'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'
在項目的src文件裏面創建env文件
env.development.js中搭配生產環境
//生產環境
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://www.365msmk.com/api/app', // 項目地址
baseApi: 'https://test.xxx.com/api', // 本地api請求地址
APPID: 'xxx',
APPSECRET: 'xxx'
}
env.production.js中搭配開發環境
//開發環境
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://www.365msmk.com', // 項目地址
baseApi: 'https://test.xxx.com/api', // 本地api請求地址
APPID: 'xxx',
APPSECRET: 'xxx'
}
env.staging.js搭配測試環境
//測試環境
module.exports = {
title: 'vue-h5-template',
baseUrl: 'http://localhost:staging.9018', // 項目地址
baseApi: 'https://test.xxx.com/api', // 本地api請求地址
APPID: 'xxx',
APPSECRET: 'xxx'
}
index.js中配置
// 根據環境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config
創建一個network文件
在config.js中統一管理接口
//配置接口
export const METHOD = {
GET: "get",
POST: "post",
PUT: "put",
};
export const PATH = {
login: "/login",
};
在core.js中創建axios實例並添加請求攔截器
import axios from "axios";
import {
METHOD
} from "./config";
import {
Toast
} from "vant";
import {
baseUrl
} from "@/config";
console.log(baseUrl);
const instance = axios.create({
baseURL: baseUrl,
timeout: 5000,
});
// let loading = null;
// 添加請求攔截器
instance.interceptors.request.use(
function (config) {
config.headers['Authorization'] = 'Bearer' + localStorage.getItem('token')
Toast.loading({
message: "加載中...",
forbidClick: true,
loadingType: "spinner",
});
return config;
},
function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
}
);
// 添加響應攔截器
instance.interceptors.response.use(
function (response) {
// 對響應數據做點什麼
// loading.close()
// if (response.data.msg === "無效token") {
// router.push({
// name: "login",
// });
// }
return response;
},
function (error) {
// 對響應錯誤做點什麼
return Promise.reject(error);
}
);
export function request(method, url, parmas) {
switch (method) {
case METHOD.GET:
return GET(url, parmas);
case METHOD.POST:
return POST(url, parmas);
case METHOD.PUT:
return PUT(url, parmas);
}
}
function GET(url, params) {
return instance.get(url, params);
}
function POST(url, params) {
return instance.post(url, params);
}
function PUT(url, params) {
return instance.put(url, params);
}
在index.js中引入config.js和core.js
import {
METHOD, PATH } from "./config";
import {
request } from "./core";
const APIClient = {
install(Vue) {
Vue.prototype.$API = this;
},
getBanner(params) {
return request(METHOD.GET, PATH.getBanner, params);
},
login(data) {
return request(METHOD.POST, PATH.login,data);
},
};
export default APIClient;
4、搭建項目需要的模塊，比如登錄模塊，首頁模塊等等