首先,我们要了解Vue.js是什么?
Vue是一个独立的社区驱动的项目,它是由尤雨溪在2014年作为其个人项目创建,是一个成熟的、经历了无数实战考验的框架,它是目前生产环境中使用最广泛的JavaScript框架之一,可以轻松处理大多数web应用的场景,并且几乎不需要手动优化,并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻,压缩后大小仅有33KB;而渐进式,是指程序员可以了一步一步、有阶段性的使用Vue,无需项目一开始就使用所以东西,使用Vue可以让Web开发更加简单,同时有别于传统的前端开发模式,他提供了时下Web开发中常见的高级功能,比如前端路由,可复用组件,状态管理等,这也是Web前端开发者们热爱Vue.js的主要原因。
其次,我们再来了解element-ui是什么?
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库,提供了丰富的 PC 端组件,简化了常用组件的封装。Element 是基于 Vue 实现的一套不依赖业务的 UI 组件库,提供了丰富的 PC 端组件,减少用户对常用组件的封装,降低了开发的难易程度。
再来,我们来了解二者之间的关系是什么?
Element-Ui 是基于 Vue 封装的组件库,简化了常用组件的封装,提高了重用性原则;Vue 是一个渐进式框架,Element-Ui 是组件库。所以我们可以知道,element是vue.js的一个组件,可以更轻松的帮助我们进行封装,学清楚element还是十分重要的。
下面进行展示
vue搭建后台管理界面(PC端)
目录结构
├── /build/ # 项目构建(webpack)相关配置 ├── /config/ # 项目开发环境配置 ├── /src/ # 源码目录 │ ├── /api/ # 请求 │ ├── /assets/ # 组件静态资源(图片) │ ├── /components/ # 公共组件 | ├── /api/ # 请求接口 │ ├── /router/ # 路由配置 │ ├── /vuex/ # vuex状态管理 │ ├── /views/ # 路由组件(页面维度) │ ├── /config/ # 接口配置文件(请求地址) │ ├── App.vue # 组件入口 │ └── main.js # 程序入口 ├── /static/ # 非组件静态资源 ├── .babelrc # ES6语法编译配置 ├── .editorconfig # 定义代码格式 ├── .eslintignore # ES6规范忽略文件 ├── .eslintrc.js # ES6语法规范配置 ├── .gitignore # git忽略文件 ├── index.html # 页面入口 ├── package.json # 项目依赖 └── README.md # 项目文档
强调
项目请求已经改为假数据,例如:
// 模拟数据开始 let res = { code: 0, msg: null, count: 12, data: [ { addUser: '1', editUser: '1', addTime: null, editTime: 1527411068000, userId: 1, systemNo: 'pmd', userName: 'root', userPassword: 'e10adc3949ba59abbe56e057f20f883e', userRealName: '超级管理员', userSex: '女', userMobile: '138123456789', userEmail: '111@qq.com', isLock: 'N', deptId: 1, deptName: 'xxxx', roleId: 1 } ] } this.loading = false this.userData = res.data // 分页赋值 this.pageparm.currentPage = this.formInline.page this.pageparm.pageSize = this.formInline.limit this.pageparm.total = res.count // 模拟数据结束 /*** * 调用接口,注释上面模拟数据 取消下面注释 */ // 获取用户列表 // userList(parameter).then(res => { // this.loading = false // if (res.success == false) { // this.$message({ // type: 'info', // message: res.msg // }) // } else { // this.userData = res.data // // 分页赋值 // this.pageparm.currentPage = this.formInline.page // this.pageparm.pageSize = this.formInline.limit // this.pageparm.total = res.count // } // })
把模拟数据开始到结束注释掉,下面解除注释即可, 接口地址需要修改config/index.js文件 dev
proxyTable: { '/api': { target: 'http://xxx.xxx.xxx.xxx:xxx', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写, '^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。 } } },
完成功能
- 登录 -- 完成
- 路由拦截 -- 完成
- 商品管理(增加、编辑、搜索、删除) -- 完成
- 角色管理(增加、编辑、搜索、删除、权限管理) -- 完成
- 交易订单(增加、编辑、搜索、删除) -- 完成
- 用户管理(增加、编辑、搜索、删除、数据权限、刷新缓存) -- 完成
- 支付配置(增加、编辑、搜索、删除) -- 完成
- 系统环境变量(增加、编辑、搜索、删除) -- 完成
- 权限管理(增加、编辑、搜索、删除、配置权限) -- 完成
- 菜单管理(增加、编辑、搜索、删除) -- 完成
- 公司管理(增加、编辑、搜索、删除) -- 完成
部分截图
商品管理
角色管理
交易订单
编辑
用户管理
支付配置
展开与压缩
运行项目
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test