使用vue-cli脚手架搭建后台项目

写在前面

致力于写一个简单明了 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 可以切换路由，此时一个简单的后台管理系统页面结构就搭建完成了。