新年后的第一篇博客，祝大家新年快乐。因为之前使用ant.design的中后台解决方案ant design pro感觉ant design pro的设计和交互非常漂亮。ant design + dva + umi的体验也非常好。像ant design pro这种中后台解决方案在vue中不是很多，所以在春节期间我开发了一个vue版本的中后台方案。时间有点儿仓促还没来得及优化。vue-admin-pro的目标就是完完整整的使用vue+nuxtjs+vuex来仿制ant design pro的风格。因为ant design pro的风格设计非常好。

vue-admin-pro

github地址: https://github.com/gmars/vue-admin-pro

介绍

vue-admin-pro是一个企业中后台的前端解决方案。该方案使用了vue、nuxtjs。在设计上的参考目标是阿里使用ant design设计的ant design pro。在线查看地址(不要用手机浏览器)http://vueadmin.sikukeji.com

安装使用

首先clone该代码库到本地

git clone https://github.com/gmars/vue-admin-pro.git

然后运行

cd vue-admin-pro

yarn install

运行项目

yarn dev

浏览
在浏览器中输入 http://localhost:3000 就可以访问

目录结构

|-components 封装的组件目录

|-pages 页面组件

|-plugins 第三方组件的配置在该项目中使用了element-ui和axios

|-layouts 布局和公共页面组件

|-store 基于vuex的状态管理

|-utils 工具函数等

依赖

"@nuxtjs/axios": "^5.0.0",
"@nuxtjs/style-resources": "^0.1.1",
"cross-env": "^5.2.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.6",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"nuxt": "^2.0.0",
"v-charts": "^1.19.0"

截屏