python+django+vue搭建前后端分离项目Part2——前端Vue

创建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'