本文幾個知識點：

1、sass
2、sass依賴報錯的問題原因分析
3、main.js入口文件的作用
4、render: h => h(App)的含義
5、router以及VUE Router路由守衛(wèi)
6、router.beforeEach()
在聊main.js這個文件之前，我們先完成一些準備工作。
首先，sass是一個很好的css擴展語言，可以幫助我們減少 CSS 重復的代碼，節(jié)省開發(fā)時間。所以先下載sass。

npm install sass-loader@7.3.1 node-sass@4.14.1  --save-dev

這里標注了sass-loader與node-sass的版本，這里主要是因為經(jīng)常會出現(xiàn)，明明下載了依賴，但是還是出現(xiàn)這類報錯（所以平時安裝依賴的時候，切忌無腦安裝）

./src/App.vue?vue&type=style&index=0&lang=scss&  Syntax Error: TypeError: this.getOptions is not a function

main.js的作用

作為項目的入口文件，所有頁面都會加載main.js，所以main.js的作用也是因其這個特點而出現(xiàn)。

1.實例化Vue。
2.放置項目中經(jīng)常會用到的插件和CSS樣式。例如： 網(wǎng)絡請求插件:axios和>vue-resource、圖片懶加載插件：vue-lazyload
3.存儲全局變量。例如（用于的基本信息）

初始創(chuàng)建的main.js文件是這樣的

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

其中來解釋下面這段代碼的含義

new Vue({
  render: h => h(App),
}).$mount('#app')

其中render函數(shù)是vue通過js渲染dom結構的函數(shù)createElement，約定可以簡寫為h，
擴展開等于：

render: function (createElement) {
  return createElement(App);
}

第一步縮寫：

render (createElement) {
  return createElement(App);
}

進一步縮寫：

render (h) {
  return h(App);
}

使用箭頭函數(shù)：

h => h(App);

實際渲染：

import App from './App'
new Vue({
    el: '#root',
    template: '<App></App>',
    components: {
        App
    }
})

router

之后我們需要加入vue router,在src下創(chuàng)建router/router.js文件。
在詳解router.js文件之前，先來了解一下VUE Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集> 成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基于組件的路由配置
• 路由參數(shù)、查詢、通配符
• 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的鏈接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

Vue.use(Router)
const vueRouter = new Router({
  routes: [{
    //首頁
    path: '/',
    redirect: '/index'
  },
  {
    //登陸界面
    path:'/login',
    name:'login',
    component:() => import('../views/login/login.vue')
  },
  {
    path: '/main',
    redirect: '/index'
  },
  {
    //父子組件按層級
    path: '/main',
    component: () => import('../views/main/main.vue'),
    name: 'main',
    children: [
      {
        path: '/candlestick',//url路徑
        name: 'candlestick',//組件名
        component: () => import('../views/candlestick/index.vue')//路徑
      },
    ]
  }]
})
export default vueRouter

這是我寫的router.js文件，之后在main.js文件中引入

import router from './router/router'

因為本次vue項目是一個后臺管理系統(tǒng)，涉及到有些頁面需要登錄進去才能查看，所以我們使用router.beforeEach()做一些進入頁面的限制。

beforeEach((to, from, next)

to:router即將進入的路由對象
from:當前導航即將離開的路由
next:Function,進行管道中的一個鉤子，如果執(zhí)行完了，則導航的狀態(tài)就是 confirmed （確認的）；否則為false，終止導航。
動態(tài)路由，判斷用戶是否登錄跳轉登錄頁面還是主頁面，判斷管理員權限，判斷頁面是否存在，不存在跳轉404頁面，

router.beforeEach((to, from, next) => {
  console.log(to,from)//從登錄頁->首頁 打印信息為(to:index,from:login)
  // 不需要登陸就能進入的頁面
  const nextRoute = ['login', 'register']
  if (nextRoute.indexOf(to.name) === -1) {
    // 未登錄
    if (!localStorage.getItem('logined')) {
      next({
        name: 'login'
      })
    }else{
      next()
    }
  }
  // 已登錄的情況再去登錄頁，跳轉至首頁
  if (to.name === 'login') {
    if (localStorage.getItem('logined')) {
      next({
        name: 'index'
      })
    }else{
      next()
    }
  }
})

之后引入elementUI

import ElementUI from 'element-ui'
Vue.use(ElementUI)

最后main.js是這樣的 引入了后續(xù)需要的axios跟echarts以及心跳機制，下期詳細講講axios跟心跳

最后放下完整的main.js文件
import Vue from 'vue'
import router from './router/router'
import App from './App.vue'
import ElementUI from 'element-ui'
import echarts from 'echarts'
import axios from './config/enviroment/https'
import './config/common/adaptation'
Vue.config.productionTip = false//判斷是否是生產(chǎn)模式
Vue.use(ElementUI)
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios
router.beforeEach((to, from, next) => {
  console.log(to,from)//
  // 不需要登陸就能進入的頁面
  const nextRoute = ['login', 'register']
  if (nextRoute.indexOf(to.name) === -1) {
    // 未登錄
    if (!localStorage.getItem('logined')) {
      next({
        name: 'login'
      })
    }else{
      next()
    }
  }
  // 已登錄的情況再去登錄頁，跳轉至首頁
  if (to.name === 'login') {
    if (localStorage.getItem('logined')) {
      next({
        name: 'index'
      })
    }else{
      next()
    }
  }
})
axios.get('/heartbeat').then(res=>{
  if(res && res.data.code === 401){
    localStorage.removeItem('logined')
  }
  window.showMessage = true
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
})