elementui django
集成 ElementUI 与 Django 的方法
前端配置（ElementUI）
在 Django 项目中创建前端工程（通常使用 Vue.js 或纯静态文件），通过 npm 安装 ElementUI：
npm install element-ui -S在 Vue 项目的 main.js 中引入 ElementUI：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);Django 静态文件处理
将构建后的前端文件（如 dist 目录）放入 Django 的 static 文件夹。在 settings.py 中配置静态文件路径：
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]模板渲染
在 Django 的模板文件中链接静态资源，例如：
<link rel="stylesheet" href="{% static 'element-ui-theme/index.css' %}">
<script src="{% static 'vue.js' %}"></script>
<script src="{% static 'element-ui/index.js' %}"></script>数据交互示例
Django 后端 API
使用 Django REST Framework 提供 API 接口：
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(['GET'])
def get_data(request):
data = {"message": "Hello from Django!"}
return Response(data)前端调用 API
在 Vue 组件中使用 Axios 调用 Django 接口：
axios.get('/api/get_data/')
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.error(error);
});部署注意事项
生产环境配置
确保 Django 的 ALLOWED_HOSTS 包含前端域名，并配置跨域（CORS）。使用 django-cors-headers 模块：
INSTALLED_APPS = ['corsheaders']
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware']
CORS_ORIGIN_ALLOW_ALL = True # 或指定具体域名静态文件收集
运行以下命令收集静态文件至 STATIC_ROOT：
python manage.py collectstatic通过以上步骤可实现 ElementUI 与 Django 的集成，实现前后端分离开发。
