vueJS+webpack+elementUI打造的简易后台管理系统

学习vue有一段时间（学习的是vue.js 2.x版本），

今天就试试用vue来写一个简易的后台管理系统（PC端，前端页面，业务功能未实现）。

我们先来看一下最终的成果图：

1.项目的创建

前端模块化开发，使用的是vue官网的 Vue Cli 初始化项目。

（1）全局安装vue-cli

npm install -g vue-cli

（2）使用vue-cli初始化项目

vue init webpack my-project

enter后会出现一些项目需要配置的信息（名称，作者等），我这里选择了默认（直接enter，enter），vue-router可以现在安装也可等项目初始化之后再安装。

（3）初始化之后，待项目创建成功，可以使用npm install安装一下必需的模块（或cnpm）

cd vue-agent-ylh

npm install

2.项目的开发

（1）项目目录结构

 

dist - build 之后生成的文件夹

asserts - 存放静态资源文件

components - vue组件可以写在里面

router - 路由配置信息

main.js - 项目全局配置信息

（2）安装并引入elementUI

npm i element-ui -S

在main.js引入安装好的elementUI （我这里是完整引入的，如需按需引入还请查看官方文档element quickstart），

同时引入路由的配置信息，也要包含在vue对象中。

（3）router的配置

要使用vue的路由功能，首先要安装vue-router

npm i vue-router -S

新建Router对象，配置路径，名称等 

在App.vue写入router-view，即可渲染页面

 3.项目的运行

npm run dev

默认打开的路径是  http://localhost:8080，如需要另外配置它，在 config/index.js 中配置相关信息。

4.项目的编译和发布

npm run build

我将写好的项目存放在我的github上了，并且使用githubPage发布了预览地址，源码在这里。（还有一些踩坑也记录在README中了）

到此，一个简易的后台管理系统打造完成~