vue-admin-后台管理系统，全文注释。

# vue-admin-stepbystep

> A Vue.js project
### 项目背景
这是公司的一个项目的阉割版，可以用作模板，里面的技术点基本全部都有注释，全都有注释，全都有注释，重要事说三遍，
写注释很辛苦，给个小赞，github给个小start,鼓励鼓励码字的我，项目正在陆续的完善中。还有重申一点，我们是前端工程师，不是码农。

麻雀虽小五脏俱全：[项目地址 https://github.com/whylisa/vue-admin-stepbystep)

## 项目功能
- 1 登录
- 2 首页
- 3 退出
- 4 table页

## 项目技术点
- 1，使用vue
- 2，使用echarts 
- 3, 使用json-server (系列二写详细文档)
- 4, 使用node起一个简单的服务,服务于接口(系列二写详细文档)
- 5, 使用axios
- 6, vue-router的使用规则(异步加载，和同步加载)
- 7, 回话拦截的使用（localstorage or cookie）
- 8, 配合element-UI 
- 9, 修改组件里面的样式里面的坑
- 10, 打包时的优化
- 11, DNS优化
- 12, 配置本地代理，使用接口(系列二写详细文档)
- 13, 使用axios配合json-server 模拟增删改查(系列二写详细文档)
- 14, 使用nprogress 插件
- 15, 鲜为人知的element-UI 的滚动条
- 16, 栅格布局，大小屏适应配合媒体查询
- 17, css使用less 
- 18, 代码风格，个人风格，禁用了jslint 防止不懂得小伙伴抓狂
- 19, 兼容性的处理(系列二写详细文档)
## 项目搭建

- 1 `vue init webpack XX` 使用vue-cli 2.0

```html
Project name                            ：默认
Project description                     ：默认
Author                                  ：默认
Vue build                               ：选择 Runtime + Compiler
Install vue-router?                     ：Y
Use ESLint to lint your code?           ：Y 选择 Standard
Set up unit tests                       ：n
Setup e2e tests with Nightwatch?        : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM
```

- 2 进入项目：cd vue-admin-stepbystep
- 3 运行项目：npm run dev

## 如何添加一个新的功能？？？

- 1 在 `components` 中新建一个文件夹（login），在文件中创建组件(Login.vue)
- 2 在 `router/index.js` 中导入组件（login.vue）
- 3 配置路由规则

## 在项目中使用 element-ui(其他自行gg加深映像)

- [ElementUI 文档](http://element-cn.eleme.io/#/zh-CN/component/installation)
- 安装：`npm i element-ui -S`

```js
// main.js

// 导入elementui - js
import ElementUI from 'element-ui'
// 导入elementui - css
import 'element-ui/lib/theme-chalk/index.css'
// 安装插件
Vue.use(ElementUI)
```

---

## 项目启动做了什么

- 1 在终端中运行：`npm run dev`，实际上就是运行了：`webpack-dev-server ...`
- 2 使用 webpack-dev-server 开启一个服务器
- 3 根据指定的入口 `src/main.js` 开始分析入口中使用到的模块
- 4 当遇到 `import` 的时候，webpack 就会加载这些模块内容（如果有重复模块，比如：Vue，实际上将来只会加载一次），遇到代码就执行这些代码
- 5 创建 Vue 实例，将 App 组件作为模板进行编译，并且将 App 组件中 template 的内容渲染在页面 #app 的位置
- 
## 路由配置
- 1 异步加载路由
- 2 使用进度条插件
- 3 登录拦截 会话保持
```js
import Vue from 'vue'
import Router from 'vue-router'
//引入nprogress进度条
import NProgress from 'nprogress'
//引入nprogress进度条的样式
import 'nprogress/nprogress.css'
//在打包过程中每一个组件都会打包成一个js文件，如果不使用使用/* webpackChunkName: "home" */
//在打包的时候就会生成0.js,1.js等等，使用了之后就会打包成home.js
// 导入 Login 组件（注意，不要添加 .vue 后缀）
//这是路由的异步加载，！important,这是优化项目必须的

//引入home组件
const Home = () => import(/* webpackChunkName: "home" */ '@/components/home')
//引入登录组件
const Login = () => import(/* webpackChunkName: "home" */ '@/components/login')
//引入table组件
const Table = () => import(/* webpackChunkName: "home" */ '@/components/table/table')
//引入homeMain组件
const HomeMain = () => import('@/components/HomeMain')

//这里是同步加载
//import Login from '@/components/login/Login'

Vue.use(Router)

const router = new Router({
    mode: 'history',//开启了history模式，去除了#，
     // 在vue中，一般来说通过实例去访问某个属性的
     // vm.xxxx  vm.$set  vm.$refs  vm.$router
    routes: [
        {
            path: '/',
            redirect: '/homeMain'//路由的重定向
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/home',
            name: 'home',
            component: Home,
            // children 用来配置子路由，将来匹配的组件会展示在 Home 组件的 router-view 中
            // 对于子路由path来说：
            // 1 如果不是以 / 开头，那么，哈希值为： 父级path + / + 子级path
            //    也就是： /home/homeMain
            // 2 如果子级路由的path是以 / 开头的，那么将来的哈希值为：/users 不再带有父级的path了
            //    也就是：/homeMain
            //这是页面中的子路由，在页面中必须声明router-view作为出口
            children: [
                {
                    path: '/homeMain',
                    name: 'homeMain',
                    component: HomeMain
                },
                {
                    path: '/table',
                    name: 'table',
                    component:Table
                }
            ]
        }
    ]
});
// 给router配置导航守卫
// to: 去哪儿
// from: from 哪儿来
// next() :  next()：放行   next('/login') 去login组件
// 在登录成功以后，将 token 存储到 localStorage 中
// 在 导航守卫 中先判断当前访问的页面是不是登录页面
// 如果是登录页面，直接放行（next()）
// 如果不是登录页面，就从 localStorage 中获取 token，判断有没有登录
// 如果登录了，直接放行（next()）
// 如果没有登录，就跳转到登录页面让用户登录（next('/login')
router.beforeEach((to, from, next) => {
//    开启进度条
    NProgress.start()
//    获取是否有token
    let token = localStorage.getItem('myToken')
    // 如果已经就是要去login了，就不需要拦截了<