vue项目结构目录

最新推荐文章于 2023-05-19 17:17:16 发布

原创最新推荐文章于 2023-05-19 17:17:16 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

8 篇文章

订阅专栏

本文深入解析Vue项目的目录结构与文件作用，从主目录到src文件夹内的各组件、静态资源及路由配置，揭示它们之间的联系与工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主目录

在这里插入图片描述
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/>'
})