一、main(入口文件)文件配置
1、创建项目成功后,又一个main入口文件,在main中导入需要的文件:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "./plugins/element.js";
// 导入字体图标
import "./assets/fonts/iconfont.css";
// 导入全局样式表
import "./assets/css/global.css";
import axios from "axios";
2、配置根域名以及请求头
axios.defaults.baseURL = "https://www.liulongbin.top:8888/api/private/v1";
// axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
// 配置请求头 请求头
axios.interceptors.request.use(config => {
config.headers.Authorization = sessionStorage.getItem("token");
return config;
});
axios.interceptors.response.use(config => {
config.headers.Authorization = sessionStorage.getItem("token");
return config;
});
//给axios起一个别名用于区分
Vue.prototype.$axios = axios;
//阻止启动生产消息
Vue.config.productionTip = false;
二、路由配置(router)
1、导入所需的路由文件
import Vue from "vue";
import Router from "vue-router";
下面是页面文件
import Login from "../components/Login.vue";
转化成路由懒加载的形式是:
const Login = () =>
import(/* webpackChunkName: "Login" */ "../components/Login.vue");
2、导入的路由文件添加到路由当中
const router = new Router({
routes: [
//下面是路由重定向 为空转到登录页
{ path: "/", redirect: "/login" },
{ path: "/login", component: Login },
{
path: "/home",
component: Home,
redirect: "/welcome",
children: [
{ path: "/welcome", component: Welcome },
{ path: "/users", component: Users },
{ path: "/rights", component: Rights },
{ path: "/roles", component: Roles },
{ path: "/categories", component: Categories },
{ path: "/params", component: Params }
]
}
]
});
3、可以设置路由的全局守卫拦截看本地有没有存储token没有则不给访问其他页面跳转到登录页面
router.beforeEach((to, from, next) => {
if (sessionStorage.getItem("token")) {
next();
} else {
if (to.path == "/login") {
next();
} else {
next("/login");
}
}
});
最后导出export default router;
三、我们写项目时需要用到ui组件库,单独建立一个文件夹配置,这里用element,创建一个文件夹plugins,在里面创建lement.js
import Vue from "vue";//d导入vue
//按需导入element组件
mport {
Button,
Form,
FormItem,
} from "element-ui";
然后use一下
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
或者是 根据element文档引入
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
四、创建一个文件夹assets 存放静态文件 css 图标字体 创建一个文件夹components存放vue文件 当然了这个名字根据个人喜好或者公司规定起名 我只是说一个大致的概念。