首先需要安装vue-cli3,并初始化一个项目官方教程 初始化项目需默认安装router及vuex 源码 项目预览 登录账号密码随意填 项目接口用的是easy-mock的服务,偶尔会500造成接口请求报错,如果遇到就等一会重新试下~~
效果预览
效果预览
Vue-cli3安装成功并启动
<template>
<div id="app">
<router-view/>
</div>
</template>
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: () => import("./views/Home.vue")
}
]
});
<template>
<div>this is index home</div>
</template>
启动项目预览
import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
},
getters
});
export default store;
const getters = {
token: state => state.user.token
};
export default getters;
const user = {
state: {},
mutations: {},
actions: {}
};
export default user;
import store from "./store/index";
module.exports = {
chainWebpack: config => {
config.plugin("define").tap(args => {
args[0]["process.env"].BASE_URL = JSON.stringify(process.env.BASE_URL);
return args;
});
}
};
NODE_ENV = "dev"
BASE_URL = "https://easy-mock.com/mock/5c513888582d704670f279b9/dev/api"
NODE_ENV = "prod"
BASE_URL = "https://easy-mock.com/mock/5c51391e582d704670f279bc/prod/api"
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
在main.js中打印环境变量
console.log(process.env)
重启项目
Ctrl + c
npm run serve
控制台中看到dev的url说明配置成功
配置成
//vue.config.js
const path = require("path");
module.exports = {
configureWebpack: () => ({
resolve: {
alias: {
"@": path.resolve("./src")
}
}
}),
chainWebpack: config => {
config.plugin("define").tap(args => {
args[0]["process.env"].BASE_URL = JSON.stringify(process.env.BASE_URL);
return args;
});
}
};
npm install axios --save
import axios from "axios";
import store from "../store";
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_URL, // api 的 base_url
timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers["X-Token"] = store.getters.token;
}
if (config.method === "post") {
config.data = config.params;
config.params = "";
}
return config;
},
error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
}
);
// response 拦截器
service.interceptors.response.use(
response => {
let { data, code, result, message } = response.data;
if (code !== 200) {
// if(status===500) 处理token过期等
return Promise.resolve(false);
} else {
return { data, result, message };
}
},
error => {
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
export default service;
const storage = {
get(key) {
return window.localStorage.getItem(key);
},
set(key, val) {
window.localStorage.setItem(
key,
typeof val !== "string" ? JSON.stringify(val) : val
);
},
del(key) {
window.localStorage.removeItem(key);
},
cle() {
window.localStorage.clear();
}
};
export default storage;
import router from "./router";
import store from "./store";
import Storage from "@/utils/storage"; // 验权
const whiteList = ["/login"]; // 不重定向白名单
router.beforeEach((to, from, next) => {
if (Storage.get("token")) {
if (to.path === "/login") {
next({ path: "/" });
} else {
if (!store.getters.userInfo) {
store.dispatch("getUserInfo");
next();
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next();
} else {
next(`/login?redirect=${to.path}`); // 否则全部重定向到登录页
}
}
});
import request from "@/utils/request";
const user = {
//登录
login({ name, password }) {
return request({
url: "/login",
method: "post",
params: {
name,
password
}
});
},
//用户信息
getInfo({ token }) {
return request({
url: "/userInfo",
method: "post",
params: {
token
}
});
},
//登出
logOut({ token }) {
return request({
url: "/userLogout",
method: "post",
params: {
token
}
});
}
};
export default user;
(1) 修改getter -- src/store/getters.js
//src/store/getters.js
const getters = {
token: state => state.user.token,
userInfo: state => state.user.userInfo
};
export default getters;
(2) 修改user module -- src/store/module/user.js
//src/store/module/user.js
import Storage from "@/utils/storage";
import userApi from "@/api/userApi";
const user = {
state: {
token: Storage.get("token") || null,
userInfo: ""
},
mutations: {
SET_TOKEN: (state, token) => {
Storage.set("token", token);
state.token = token;
},
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo;
}
},
actions: {
setToken({ commit }, token) {
commit("SET_TOKEN", token);
},
//用户信息
getUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
userApi
.getInfo({ token: state.token })
.then(res => {
if (res.result) {
commit("SET_USER_INFO", res.result.userInfo);
}
})
.catch(err => {
reject(err);
});
});
},
//登出
logOut({ commit, state }) {
return new Promise((resolve, reject) => {
userApi
.logOut({ token: state.token })
.then(() => {
commit("SET_TOKEN", "");
Storage.cle();
resolve();
})
.catch(err => {
reject(err);
});
});
}
}
};
export default user;
(1) 修改路由 -- src/router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/login",
name: "Login",
component: () => import("./views/Login.vue")
},
{
path: "/",
name: "Home",
component: () => import("./views/Home.vue")
}
]
});
(2) 添加登录页 新建文件 -- src/views/Login.vue
<template>
<div>
<div>test</div>
<div>
<div>
<label for="name">用户名</label>
<input type="text" name="name" v-model="user.name">
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" v-model="user.password">
</div>
<button @click="userLogin">登录</button>
<div>{{token}}</div>
</div>
</div>
</template>
<script>
import userApi from "@/api/userApi";
import { mapGetters } from "vuex";
export default {
data() {
return {
user: {
name: "",
password: ""
}
};
},
computed: {
...mapGetters(["token"])
},
methods: {
async userLogin() {
let res = await userApi.login(this.user);
if (res) {
this.$store.dispatch("setToken", res.result.token);
this.$router.push({ path: this.redirect || "/" });
}
}
}
};
</script>
(3) 添加首页 新建文件 -- src/views/Home.vue
<template>
<div>
<div>Home</div>
<div>
<div>
<span>用户名:</span>
{{userInfo.name}}
</div>
<div>
<span>权限:</span>
{{userInfo.auth}}
</div>
<div>
<span>账户创建时间:</span>
{{userInfo.time}}
</div>
</div>
<button @click="userLogout">退出登陆</button>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["userInfo"])
},
methods: {
userLogout() {
this.$store.dispatch("logOut").then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
}
}
};
</script>
//main.js
import "@/permission";
效果预览
效果预览
npm run build
部署可选择手动打包也可以用jenkins自动打包
项目预览 登录账号密码随意填 项目接口用的是easy-mock的服务,偶尔会500造成接口请求报错,如果遇到就等一会重新试下~~