主目录
README.md
项目的说明文件
package.json
需要的第三方的依赖包
package-lock.json
第三方包的一些具体版本信息,保持团队开发的统一
index.html
项目默认的模板文件
static
放置的静态资源/json数据等
src
文件放置的是整个项目的源代码
————————————————
src文件
main.js
整个项目的入口文件
app.vue
项目原始的根组件
router
路由下的index.js
components
放置的是组件
assets
放置的是图片类静态资源
————————————————————————
src
目录下几个文件的关系:
1.首先在主目录下的index.html文件是项目的主页,所有的组件通过这个页面展示到网页上。
里面的结构是这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_demo1</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
其中body中的id="app"决定了要找到在App.vue
中的id为app的template组件,并把它渲染到根目录下的index.html中
2.App.vue的template结构是这样的
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
其中<router-view/>
是表明会接受component文件夹中的子组件,这部分用到了再详细整理。若删除这个,就不会连接到component的子组件了。
3.main.js是整个项目得入口文件,在里面要引入一些用得到的包
里面的结构是这样的
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})