python+django+vue搭建前后端分离项目Part2——前端Vue
2022/1/31 12:04:24
本文主要是介绍python+django+vue搭建前后端分离项目Part2——前端Vue,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 创建vue项目
- 主要文件及其作用
- src/components/
- src/router/index.js
- src/main.js
- static/
创建vue项目
(my_django) XXX:django_pro$ npm install -g @vue/cli-init #该命令不是每次都需要,第一次使用vue init之前需要。若不添加,则无法使用vue init命令, (my_django) XXX:django_pro$ vue init webpack frontend
以上是我对初始化vue项目的配置,供参考
? Project name frontend ? Project description the frontend for my first web ? Author name <XXXX@qq.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm
主要文件及其作用
在编写过程中,主要会使用到的几个文件夹和文件有:src/components/,src/router/index.js,src/main.js, static/
src/components/
该文件夹主要用于存储各个界面的主要内容,一般每个界面单独在该文件夹下新建一个XX.vue文件。
每个XX.vue中主要包含以下信息。
<template> ... </template> <script> export default { name: 'XXX', # 用于路由 data () { return { ## 界面中输入框等控件的返回值 } }, mounted: function () { # 页面加载时触发的函数 }, methods: { ## 触发操作 ## e.g. 带有参数的函数定义 function1(param) { ### 调用django中设置的接口函数,通过url传参方式 this.$http.get('http://127.0.0.1:8000/api/function?param=' + param).then((response) => { var res = JSON.parse(response.bodyText) if (res.error_num === 0) { this.$message. } else { this.$message.error('失败,请重试') console.log(res['msg']) } }) }, } } </script> <style> ... # 总体样式设置 </style> <style scoped> ... # 每个scope中的统一样式设置 </style>
src/router/index.js
用于设置路由,每在components中添加一个vue,都需要在该文件中添加相对应的路由。如,在components中添加了一个Home.vue,其中它的name为Home。则需要在该文件中添加以下信息。
import Home from '@/components/Home' # 需要添加 export default new Router({ mode: "history", routes: [ # 需要添加 { path: '/home', name:'Home', component: Home },#当用http://localhost:8080/home 访问的时候可以返回Home.vue中的信息 ] })
src/main.js
该文件用于注册导入一些依赖包,如ElementUI
导入一个依赖包并注册需要用到以下代码
import XXX from yyy Vue.use(XXX)
static/
用于存放一些静态文件,如image, css等。使用的时候通过src/main.js导入即可
如:
import '../static/css/reset.css'
这篇关于python+django+vue搭建前后端分离项目Part2——前端Vue的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略