drf + vue全栈教程: 前端项目分解
这篇文章，我们系统的学习一下vue前端项目主要文件的作用。
注意：这一章内容相对有难度，也很重要，注意认真学习！
分析项目结构
首先，我们分析一下项目目录主要结构：
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>
另外注明一下，由于博主闲暇时间不多，且也是刚开始学vue，所以教程更新会很慢，多多谅解 有任何疑问欢迎加QQ群：Python学习交流 1140464262
请登录后回复
共有4条评论
jacky 于 2个月前 评论：
勘误：教程中关于view文件夹和component文件夹的讲解有一些错误，在此修正。
- view：主要写代码的地方，路由直接链接的组件就在这里
- component：view文件夹文件的子组件，通常在view文件夹的文件中调用（为代码的可读性而生）
jacky 于 3个月前 评论：
有客来 于 3个月前 评论：
弹尤克里里的测试er 于 3个月前 评论：
