项目结构
main.js入口文件
import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' //导入全局样式 import './assets/css/global.css' import './assets/fonts/iconfont.css' import axios from 'axios' import TreeTable from 'vue-table-with-tree-grid' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import NProgress from 'nprogress' import 'nprogress/nprogress.css' axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/' // 请求头拦截 axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) axios.interceptors.response.use(config => { NProgress.done() return config }) Vue.prototype.$http = axios Vue.component('tree-table', TreeTable) Vue.use(VueQuillEditor) Vue.filter('dateFormat', (originVal) => { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + 1 + '').padStart(2, '0') const hh = (dt.getHours() + 1 + '').padStart(2, '0') const mm = (dt.getMinutes() + 1 + '').padStart(2, '0') const ss = (dt.getSeconds() + 1 + '').padStart(2, '0') return `${y}-${m}-${d} ${hh}:${mm}:${ss}` }) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
路由文件router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [{ path: '/login', name: 'Login', component: () => import ('../components/Login.vue') }, { path: '/home', name: 'Home', redirect: '/welcome', component: () => import ('../views/Home'), children: [{ path: '/welcome', component: () => import ('../components/Welcome') }, { path: '/users', component: () => import ('../components/users/Users') }, { path: '/rights', component: () => import ('../components/power/Rights') }, { path: '/roles', component: () => import ('../components/power/Roles') }, { path: '/categories', component: () => import ('../components/goods/Cate.vue') }, { path: '/params', component: () => import ('../components/goods/Params.vue') }, { path: '/goods', component: () => import ('../components/goods/List.vue') }, { path: '/goods/add', component: () => import ('../components/goods/Add.vue') }, { path: '/orders', component: () => import ('../components/order/Order.vue') }, { path: '/reports', component: () => import ('../components/report/Report.vue') } ], }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import ('../views/About.vue') } ] const router = new VueRouter({ routes }) //路由导航守卫 router.beforeEach((to, from, next) => { if (to.path === '/login') return next() const tokenStr = window.sessionStorage.getItem('token') if (!tokenStr) return next('/login') next() }) export default router
App.Vue应用组件
<template> <div id="app"> <!-- 路由占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'app', } </script> <style> </style>
Element.Js
import Vue from 'vue' import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane, Step, Steps, CheckboxGroup, Checkbox, Upload, Timeline, TimelineItem } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItem) Vue.use(Breadcrumb) Vue.use(BreadcrumbItem) Vue.use(Card) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Switch) Vue.use(Tooltip) Vue.use(Pagination) Vue.use(Dialog) Vue.use(Tag) Vue.use(Tree) Vue.use(Select) Vue.use(Option) Vue.use(Cascader) Vue.use(Alert) Vue.use(Tabs) Vue.use(TabPane) Vue.use(Step) Vue.use(Steps) Vue.use(Checkbox) Vue.use(CheckboxGroup) Vue.use(Upload) Vue.use(Timeline) Vue.use(TimelineItem) Vue.prototype.$message = Message Vue.prototype.$confirm = MessageBox.confirm