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'用法類似，但也有一些差別。