在Django中使用Vue开发模式的步骤如下:
node -v
和npm -v
命令,如果能正确显示版本号,则说明已安装。python manage.py startapp appname
命令来创建一个新的应用程序。npm install -g @vue/cli
命令,全局安装Vue脚手架。vue create frontend
命令来创建一个新的Vue项目,命名为"frontend"(也可以使用其他名称)。vue.config.js
文件,在其中添加以下内容:module.exports = {
outputDir: '../static/frontend',
publicPath: process.env.NODE_ENV === 'production' ? '/' : 'http://localhost:8080/',
indexPath: '../templates/frontend/index.html',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
ws: true,
changeOrigin: true
}
}
}
}
上述配置将Vue的编译输出目录设置为Django的静态文件目录,将Vue的开发服务器代理到Django的开发服务器,并将打包后的Vue文件输出到Django的模板目录。
src
目录下,根据需要创建各种Vue组件,如App.vue
、HelloWorld.vue
等。settings.py
文件中,配置STATICFILES_DIRS
和TEMPLATES
,确保Django能够正确加载Vue的静态文件和模板。views.py
文件中创建相应的视图函数,并在urls.py
文件中配置路由。{% load static %}
标签加载静态文件,然后使用<script>
标签引入Vue组件的打包文件。npm run serve
命令,启动Vue的开发服务器。python manage.py runserver
命令,启动Django的开发服务器。现在,你可以在Django中使用Vue开发模式了。当你修改Vue组件时,Vue的开发服务器会自动重新编译,并将更新的内容通过代理传递给Django的开发服务器,刷新浏览器即可看到更新的效果。
领取专属 10元无门槛券
手把手带您无忧上云