cnpm install vue-cli -g
键入vue --version ,出现以下版本号,则代表成功
如果使用poweshellr提示无法加载文件 D:\nvm\nodejs\vue.ps1,因为在此系统上禁止运行脚本,请点击我查看解决办法
? Please pick a preset:
default (babel, eslint) // 默认
> Manually select features // 手动选择,我选这个
接下来的选择可看红色圈出的部分部分
分别代表的是:
cnpm install --save axios vue-axios
分别是.env,.env.development,.env.release,对应的变量
NODE_ENV=production // 对应的启动环境
VUE_APP_API_BASE_URL=/api // 请求的路径,根据自身情况更改
cnpm install js-cookie --save
import Cookie from "js-cookie";
const AccessTokenKey = "Admin-Token"; // 属性名,自行修改
export function getAccessToken() {
return Cookie.get(AccessTokenKey);
}
export function setAccessToken(token) {
return Cookie.set(AccessTokenKey, token);
}
export function removeAccessToken() {
return Cookie.remove(AccessTokenKey);
}
import axios from "axios";
// import store from "@/store";
import { getAccessToken } from "@/util/auth";
import { notification } from "ant-design-vue";
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 10000 // 请求超时时间,10s
});
// 异常拦截处理器
const errorHandler = errorRep => {
if (errorRep.response) {
const {
data: { error },
status
} = errorRep.response,
// 从 coockie 获取 token
token = getAccessToken();
// 身份验证失败
if (status === 401) {
notification.error({
message: "身份验证",
description: "登录过期,需要重新验证身份"
});
// 如果登录了,则退出登录
if (token) {
// store.dispatch("Logout").then(() => {
// setTimeout(() => {
// window.location.reload();
// }, 1500);
// });
}
}
if (status === 403) {
notification.error({
message: "拒绝访问",
description: error.message
});
} else {
notification.error({
message: "错误消息",
description: error.message
});
}
return Promise.reject(error);
}
return Promise.reject(errorRep);
};
// 请求前拦截
request.interceptors.request.use(config => {
const token = getAccessToken();
// 如果 token 存在
// 让每个请求携带自定义 token 请根据实际情况自行修改
if (token) {
config.headers["authorization"] = `Bearer ${token}`;
}
return config;
}, errorHandler);
// 请求后拦截
request.interceptors.response.use(response => {
return response.data;
}, errorHandler);
export default request;
import { login, getUserInfo, logout } from "@/api/user";
import { setAccessToken, removeAccessToken } from "@/util/auth";
const state = {
token: null, // token
name: null, // 用户名
avatar: null, // 头像
role: null // 角色
};
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token;
},
SET_NAME: (state, name) => {
state.name = name;
},
SET_AVATER: (state, avatar) => {
state.avatar = avatar;
},
SET_ROLE: (state, role) => {
state.role = role;
}
};
const actions = {
// 登录,true代表登录成功
login({ commit }, userInfo) {
const { username, password } = userInfo;
return login({ username, password }).then(token => {
commit("SET_TOKEN", token);
setAccessToken(token);
return true;
});
},
// 获取用户信息
getUserInfo({ commit }) {
return getUserInfo().then(user => {
const { username, avatar, role } = user;
commit("SET_NAME", username);
commit("SET_AVATER", avatar);
commit("SET_ROLE", role);
return user;
});
},
// 退出登录
logout({ commit }) {
return logout().then(() => {
commit("SET_NAME", null);
commit("SET_AVATER", null);
commit("SET_ROLE", null);
commit("SET_token", null);
removeAccessToken();
return true;
});
}
};
export default {
state,
mutations,
actions
};
export default {
token: state => state.user.token,
username: state => state.user.name,
avater: state => state.user.avater,
role: state => state.user.role
};
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
Vue.use(Vuex);
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context("./modules", true, /\.js$/);
//module文件夹下的状态机自动引入
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// 格式化 './user.js' => 'user'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});
const store = new Vuex.Store({
modules,
getters
});
export default store;
这里只写了判断登录,如果需要页面权限控制,则复杂很多,请参考这里
router.beforeEach((to, from, next) => {
const token = getAccessToken();
// 有token
if (token()) {
//登录页
if (to.path === "/login") {
next("/");
}
// 非登录页
else {
next();
}
}
//无token
else {
//登录页
if (to.path === "/login") {
next();
} else {
next("/login?redirect=" + to.path);
}
}
});
cnpm install ant-design-vue --save
cnpm install babel-plugin-import -save-dev
在根目录创建babel.config.js,并加入以下配置
plugins: [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css"}] // 如果需要自定义主题,此处style:true,需要自定义主题看下面描述
]
// cusImportAntD.js,按需引入antD
import Vue from "vue";
import { Button, Input, Menu, Row, Col, Table, Modal, Tag, message, Icon, DatePicker, FormModel, Spin, notification, Result, Layout, Select, Collapse, Popconfirm, Tabs, Empty, Radio, Checkbox, Slider} from "ant-design-vue";
const antd = [ Button, Input, Menu, Row, Col, Table, Modal, Tag, Icon, DatePicker, FormModel, Spin, Result, Layout, Select, Collapse, Popconfirm, Tabs, Empty, Radio, Checkbox, Slider];
antd.forEach(component => {
Vue.use(component);
});
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;
// main.js引入cusImportAntD.js
// 引入antD,因为已经使用了babel-plugin-import,此处无需引入css
import "@/util/cusImportAntd";
cnpm install less less-loader --save-dev
plugins: [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}] // `style: true` 会加载 less 文件
]
css: {
// requireModuleExtension: false, // 这句话不能要,否则css样式不起效
loaderOptions: {
less: {
// 这里的选项会传递给 less-loader
lessOptions: {
modifyVars: { // 这里是自定义的主题颜色,全部变量属性参照官方
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"border-radius-base": "2px"
},
javascriptEnabled: true // 这句话必须要,否则不起效
}
}
}