使用Vue搭建前端项目架构《转载》
一、创建Vue项目基础框架1.使用vue cli脚手架创建项目的基础框架具体vue的配置如下:2.配置.gitignore文件=>在提交到GitHub时不要提交node modules文件二、创建GitHub仓库1.在GitHub上创建仓库2.clone仓库到本地3.将上面使用vue cli创建的项目基础框架文件复制到上面仓库目录中4.选择性push代码(也可以后面的工作完成后再push)三
一、创建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;
});
更多推荐
所有评论(0)