这篇文章,我们系统的学习一下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
jacky 于 5个月前 评论:
勘误:教程中关于view文件夹和component文件夹的讲解有一些错误,在此修正。
jacky 于 6个月前 评论:
有客来 于 6个月前 评论:
弹尤克里里的测试er 于 6个月前 评论:
CopyRight © 2020 Jacky的编程空间
Powered by Django & Bootstrap 沪ICP备20019721号-1 本站总访问量次