【Hello VUE】暴學VUE之代碼講解（八）

從這一章開始，講解系統的程序邏輯了。涉及很多vue相關的知識，還有原作者的思路。比較枯燥，而且由於水平有限，我只能把我所知道講出來，如果有不對的地方請指正。

什麼是main.js，他主要幹什麼用的？App.vue又是幹什麼用的？main.js 裏面的import from又在幹嘛？newVue（{}）是幹嘛的？裏面又需要什麼參數，它到底能幹什麼。在網上搜了一篇博文，解答一些初級的困惑。

vue項目入口

vue項目入口有兩個文件：
/src/App.vue 頁面佈局
/src/main.js 程序邏輯
/src/router/index.js 程序路由信息

App.vue源碼

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  @import "./assets/css/main.css";
  @import "./assets/css/color-dark.css"; 
</style>

App.vue是我們的主組件，所有頁面都是在App.vue下進行切換的。也是整個項目的關鍵，app.vue負責構建定義及頁面組件歸集。其實你也可以理解爲所有的路由也是App.vue的子組件。所以我將router標示爲App.vue的子組件。

1. 所有的html代碼要放置在template標籤裏面
2. 所有的javascript代碼要放置在script標籤裏面
3. 所有的style代碼要放置在style標籤裏面

main.js源碼

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import AxiosPlugin from './libs/AxiosPlugin'
import store from './store/'

Vue.use(AxiosPlugin)
Vue.use(ElementUI);
Vue.config.productionTip = false;

//判斷是否有token,沒有則登陸
router.beforeEach((to, from, next) => {
  if (to.path != '/login') {
    var token = sessionStorage.getItem('token');
    if (token == null) {
       next({path:'/login'});
    } else {
      //根據後臺返回的路由進行判斷是否合法
      var routers = sessionStorage.getItem('routers');
      var flag = false;
      routers.split("_").forEach( v => {
        if(v == to.path) {
          flag = true;
        }
      });

      if(flag) {
       next();
      } else {
         next({path:'/home'});
      }
    }
  } else {
    next();
  }
})


/* eslint-disable no-new */
new Vue({
  store,
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

main.js 程序入口文件，是初始化vue實例並使用需要的插件,加載各種公共組件.

import from 是幹嘛的呢？

實際上，importfrom是ES6語法裏面的。因爲相關知識很多，具體參見博客裏ES6裏面的import，export。
在這裏只是給大家介紹下它在這裏的用處。

1. import Vue from ‘vue’;
   其實最完整的寫法是：
   import Vue from “…/node_modules/vue/dist/vue.js”;
   意思是：因爲main.js是在src文件中，所以…/向前一級相對目錄查找node_modules，再依次尋找後面的文件。
2. import App from ‘./App’;
   其實最完整的寫法是（相對路徑）：
   import App from ‘./App.vue’;
   推薦這樣寫，直接路徑：
   import App from ‘@/App.vue’;
   意思其實就是引入我們寫好的.vue文件。
3. 還可以有
   import router from ‘./router’;
   import router from ‘./router/index.js’;
   import router from ‘@/router/index.js’;

import axios from ‘axios’;
import axios from ‘…\node_modules\axios\dist\axios.js’;

import ‘./less/index’;
import ‘./less/index.less’;

@代表的是src文件夾

小結：在簡書上看到有一個人總結的很好：

1. import…from…的from命令後面可以跟很多路徑格式，若只給出vue，axios這樣的包名，則會自動到node_modules中加載；若給出相對路徑及文件前綴，則到指定位置尋找。
2. 可以加載各種各樣的文件：.js、.vue、.less等等。
3. 可以省略掉from直接引入。

/router/index.js源碼

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home.vue'
import Login from '@/views/login/Login.vue'

Vue.use(Router)

// 登錄頁面單獨寫，如下
export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登錄'
  },
  component: Login
}

export const appRouter = {
  path: '/',
  name: 'home',
  redirect: '/login',
  component: Home,
  children: [
    {
      path: '/home',
      title: '首頁',
      name: 'dashboard',
      component: () => import('@/views/Index.vue')
    },
    //用戶管理
    {
      path: 'user/list',
      title: '用戶列表',
      name: 'userList',
      component: () => import('@/views/user/UserList.vue')
    },
    {
      path: 'user/info',
      title: '用戶信息',
      name: 'userInfo',
      component: () => import('@/views/user/UserInfo.vue')
    },
    //example
    {
      path: 'example/table',
      title: 'TABLE',
      name: 'exampleTable',
      component: () => import('@/views/example/table.vue')
    },
    {
      path: 'example/form',
      title: 'FORM',
      name: 'exampleForm',
      component: () => import('@/views/example/form.vue')
    }

  ]
};

export default new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [loginRouter, appRouter]
})

router index.js 把準備好路由組件註冊到路由裏

這裏還有一些其他的文件意思：

index.html文件入口

src放置組件和入口文件

node_modules爲依賴的模塊

config中配置了路徑端口值等

build中配置了webpack的基本配置、開發環境配置、生產環境配置等