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 =