写在前面
致力于写一个简单明了 vue-cli脚手架 入门教程，基础原理、api 建议多看 vue.js 官方文档：https://cn.vuejs.org/，这里主要是讲如何使用 vue-cli 脚手架搭建后台管理系统。
项目地址：https://github.com/ww028/admin_demo.git
使用 vue-cli 脚手架创建项目
创建项目之前确保安装 node.js, npm, webpack
vue init webpack project_name
以下根据提示填写就好，这里除了 vue-router 全部 No，最后一项使用 npm 还是 yarn 自己选就好，我这里选择 npm
以上步骤执行完成之后，根据提示启动项目，执行以下操作:
cd project_name
npm run dev
默认 8080 端口，此时访问 http://localhost:8081 就可以看到项目首页了
项目结构：
此时只需要了解 src 目录就可以了
此时我们来修改一下默认加载的组件，理解为修改默认展示页面就好
1. pages 目录下，新建index.vue
2. 删除App.vue 多余css 和 logo
2. router/index.js 修改如下
此时再访问页面，就可以看到首页的变化了。
使用组件：
1. components 目录下新建 MyHeader.vue，MyAside.vue 文件，作为头部和侧边栏组件
2. 在 index.vue 文件中引入组件并使用，此时index.vue 代码如下
3. css 目录下创建 base.css 并引入，css 看自己怎么写了
main.js 引入 base.css: import "./css/base.css"
此时页面就生成了一个很常见的后台管理系统页面布局
嵌套路由
此时页面生成了，但是缺少一个登陆页，登陆页面和我们的内容页面是平级的，内容页面中内容切换是通过侧边栏路由切换来变化，所以就需要在内容页面嵌套一个子路由，如下
1. 首先创建 登陆页面和两个展示页面，创建后目录如下
2. 修改 index.vue 如下
修改 router/index.js 如下
编写的登陆页面 login.vue
最后修改 MyAside.vue 组件
此时就完成了页面结构修改，再看页面默认加载组件已经改为 login.vue 登陆页面，点击登陆，跳转到 index.vue 页面，此时通过点击侧边栏 page1，page2 可以切换路由，此时一个简单的后台管理系统页面结构就搭建完成了。
