文章目录

创建vue项目主要文件及其作用src/components/src/router/index.jssrc/main.jsstatic/

创建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@>? 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 yyyVue.use(XXX)

static/

用于存放一些静态文件，如image, css等。使用的时候通过src/main.js导入即可

如：

import '../static/css/reset.css'