vue实战之vue后台管理系统（一）

本文主要介绍了

• 项目的来源
• 几个主要的代码部分的分析（main.js、routes.js、App.vue）
  在网上很少找到关于一个较完全的vue项目的开发文档（即如何一步步的搭建一个vue项目）

项目来源

这个项目是我自己从Git上面找到的一个项目，并不是我整的，毕竟我只是一个菜鸡，但是，这个只是为了方便我自己回顾项目整的。
项目网址 https://github.com/taylorchen709/vue-admin
很棒棒的一个作者。

vue的安装配置等等等

此处省略，自行百度。

代码分析

代码目录结构

• build - webpack config files
• config - webpack config files
• dist - build
• src -your app
  • api
  • assets
  • common
  • components - your vue components
  • mock
  • styles
  • views - your pages
  • vuex
  • App.vue
• main.js - main file
• routes.js
• static - static assets

index.html就不分析了；

main.js 入口文件(可以设置）

import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//import './assets/theme/theme-green/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
import routes from './routes'
import Mock from './mock'
Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'

import 用来引入需要的插件以及相关的样式

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

vue在使用其他的组件的时候，需要用到Vue.use(),这是因为这些组件中有install方法，而axios不需要通过Vue.use()使用。
参考网址：https://www.jianshu.com/p/89a05706917a
↑↑↑ 讲解还是不够深刻

vue-router的基本使用： https://www.cnblogs.com/SamWeb/p/6610733.html

const router = new VueRouter({
  routes     //相当于routes：routes
})

在相同目录下新建一个routes.js，用于存放多个路由routes的配置。如果在路由不多的情况下可以在main.js配置routes即可。
在这个地方routes.js应该是哪里配置过，就像main.js是入口文件一样，routes.js是专门用来配置routes的，实属个人猜测，之后有机会求证一下。

import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Main from './views/Main.vue'
import Table from './views/nav1/Table.vue'
import Form from './views/nav1/Form.vue'
import user from './views/nav1/user.vue'
import Page4 from './views/nav2/Page4.vue'
import Page5 from './views/nav2/Page5.vue'
import Page6 from './views/nav3/Page6.vue'
import echarts from './views/charts/echarts.vue'

let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },
    //{ path: '/main', component: Main },
    {
        path: '/',
        component: Home,
        name: '导航一',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            { path: '/main', component: Main, name: '主页', hidden: true },
            { path: '/table', component: Table, name: 'Table' },
            { path: '/form', component: Form, name: 'Form' },
            { path: '/user', component: user, name: '列表' },
        ]
    },
    {
        path: '/',
        component: Home,
        name: '导航二',
        iconCls: 'fa fa-id-card-o',
        children: [
            { path: '/page4', component: Page4, name: '页面4' },
            { path: '/page5', component: Page5, name: '页面5' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-address-card',
        leaf: true,//只有一个节点
        children: [
            { path: '/page6', component: Page6, name: '导航三' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: 'Charts',
        iconCls: 'fa fa-bar-chart',
        children: [
            { path: '/echarts', component: echarts, name: 'echarts' }
        ]
    },
    {
        path: '*',
        hidden: true,
        redirect: { path: '/404' }
    }
];

export default routes;

routes组件中的参数说明：
vue官网的路由器说明：https://router.vuejs.org/guide/#html
path 对应路由的跳转路径（动态路由，可以控制动态路径）
component 该路径映射的组件
name 给路由设置名称（命名路由）
children 某个路由的子路由，可以跟路由一样配置参数（嵌套路由）
hidden：true； //并没有找到这个是什么意思的，但是注释掉我的侧变量就是多了三个没有名字的标签。

router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

官网导航守卫部分知识： https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局守卫
router.beforeEach是导航守卫中的全局前置守卫。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

new Vue({
  //el: '#app',
  //template: '<App/>',
  router,
  store,
  //components: { App }
  render: h => h(App)
}).$mount('#app')

new vue 中的参数说明： https://www.jianshu.com/p/cf2611ed1b1f
$mout('#app')与el:'#app'用法类似，但也有一些差别。