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

作者:jacky
浏览:242

摘要:前端项目分解

这篇文章,我们系统的学习一下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:配置文件

认识我们需要的文件后缀

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

  1. .pyPython文件,这个大家都知道,是写后端代码的
  2. .jsJavaScript文件,在本项目中,大多是配置类的文件,文件像这样:
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的编程空间',
      }
    },
  ]
})
  1. .vuevuejs的文件,用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文件夹的讲解有一些错误,在此修正。

  1. view:主要写代码的地方,路由直接链接的组件就在这里
  2. component:view文件夹文件的子组件,通常在view文件夹的文件中调用(为代码的可读性而生)

jacky 3个月前 评论:

angel


有客来 3个月前 评论:

smiley


弹尤克里里的测试er 3个月前 评论:

cool





CopyRight © 2020 Jacky的编程空间

Powered by Django & Bootstrap  沪ICP备20019721号-1 本站总访问量