python vue element_干货｜vue-element-admin和Django简单整合

原标题：干货｜vue-element-admin和Django简单整合

前言

笔者是一个python guy开发者-----俗称"二把刀开发者"，平常大部分时间写的都是poc、脚本和工具类应用，很少写整站项目。如果你是一个前端工程师和资深开发工程师，请忽略本文。我们这样的 guy在做一些小的项目时，经常受限于对前端代码不熟悉，导致写各种工具时，不喜欢做前端页面。

最近发现个神器“vue-element-admin” https://github.com/PanJiaChen/vue-element-admin 可以帮助解决这个问题，让后端狗也能“超快速”上手酷炫的前端页面。

虽然项目的README非常详细，也有startup的教程，但是对于前后端交互的描述还是有些不清楚，本文是笔者排坑总结下的步骤，方便大家配置。

0x01 vue-element-admin 简介

vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element，使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

引用自https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md

而且Repo的主人还很良心的告诉你 “这个是一个后台集成方案，不是模板，模板另有地址供大家参考”集成方案相当于在vue-element上进行了很多的集成，而模板更像一个vue-element纯模板，对有前端开发能力的选手而言，更灵活。

本文使用的是这个集成方案和Django做的整合，方便我们这些后端工具狗们快速上手，将数据展示到前端。

0x02 vue-element-admin 下载和部署

这里按照项目里的Readme.md部署就可以了，非常简单。

# 克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

# 安装依赖

npm install

# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

# 启动服务

npm run dev

这个时候，就可以看到酷炫的页面了。

大家可以仔细阅读Repo里的各种教程来上手。推荐直接访问：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 来了解项目的架构。

这个说明文档没有一句废话，建议认真阅读。

主要有以下重点：

目录结构

├── build // 构建相关

├── config // 配置相关

├── src // 源代码

│ ├── api // 所有请求

│ ├── assets // 主题 字体等静态资源

│ ├── components // 全局公用组件

│ ├── directive // 全局指令

│ ├── filters // 全局 filter

│ ├── icons // 项目所有 svg icons

│ ├── lang // 国际化 language

│ ├── mock // 项目mock 模拟数据

│ ├── router // 路由

│ ├── store // 全局 store管理

│ ├── styles // 全局样式

│ ├── utils // 全局公用方法

│ ├── vendor // 公用vendor

│ ├── views // views 所有页面

│ ├── App.vue // 入口页面

│ ├── main.js // 入口文件 加载组件 初始化等

│ └── permission.js // 权限管理

├── static // 第三方不打包资源

│ └── Tinymce // 富文本

├── .babelrc // babel-loader 配置

├── .eslintrc.js // eslint 配置项

├── .gitignore // git 忽略项

├── .travis.yml // 自动化CI配置

├── favicon.ico // favicon图标

├── index.html // html模板

└── package.json //