開發一個專案，首先我們要看專案開發的檔案，有哪些要求，
文章目錄
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、搭建專案需要的模塊，比如登錄模塊，首頁模塊等等
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/245241.html
標籤：其他