drf+vue全栈教程：前端项目分解

这篇文章，我们系统的学习一下vue前端项目主要文件的作用。

注意：这一章内容相对有难度，也很重要，注意认真学习！

分析项目结构

首先，我们分析一下项目目录主要结构：

1
2
3

flask-vue-todo
├─frontend    # 存放前端文件
├─backend    # 存放后端文件

后端文件的目录就是我们新建的djangoAPP，前端目录是vue项目，这篇文章主要讲前端目录。

frontend
├─node_modules
├─src
├─public
├─static # 不用管
├─test # 不用管

这里只列举了一些重要文件夹，其他package.json等文件就不说了，也和项目没太大关系，接下去一步步分析这些文件夹的作用。

1，node_modules：存放下载的开发环境和生产环境的各种依赖

2，src：工程项目的源码以及资源，包括页面图片、路由组件、路由配置、vuex、入口文件等，也是我们要写代码的地方。

2，public：存放html,ico等文件

接下来再着重分析src文件夹下面的文件

src
├─assets
├─components
├─router
├─App.vue
├─main.js
├─view # 不用管

1，assets：存放图片文件

2，components：存放.vue文件

3，router：存放路由配置文件

4，App.vue：入口文件

5，main.js：配置文件

认识我们需要的文件后缀

我们会用到三个文件后缀，再次讲一下：

.py：Python文件，这个大家都知道，是写后端代码的
.js：JavaScript文件，在本项目中，大多是配置类的文件，文件像这样：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: 'Jacky的编程空间',
      }
    },
  ]
})

.vue：vuejs的文件，用vuejs特有的语法，文件像这样，常分为HTML,JavaScript两个部分：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>