程序员之家
程序员之家

Vue3 目录结构


典型的 Vue 项目结构:

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js
└── yarn.lock or package-lock.json


目录解析

目录/文件 说明
node_modules/ 存放项目的所有依赖包,由 npm 或 yarn 自动生成和管理。
public/ 静态文件目录,里面的文件不会被 Webpack 处理,最终会原样复制到打包目录下。
public/favicon.ico 网站的图标。
public/index.html 应用的主 HTML 文件,Vue CLI 会在构建时自动注入生成的静态资源链接。
src/ 源代码目录,存放应用的主要代码。
src/assets/ 存放静态资源,如图像、字体等。这些文件会由 Webpack 处理,可以通过相对路径引用。
src/assets/logo.png 示例图像文件。
src/components/ 存放 Vue 组件,每个组件都是一个独立的 .vue 文件。
src/components/HelloWorld.vue 默认生成的示例组件。
src/views/ 存放视图组件,通常对应路由,每个视图都是一个独立的 .vue 文件。
src/views/Home.vue 默认生成的主页组件。
src/router/ 存放路由配置文件。
src/router/index.js 路由的配置文件,定义了应用的路由规则。
src/App.vue 根组件,整个应用的入口组件。
src/main.js 应用的入口文件,负责创建 Vue 实例并挂载到 DOM 上。
根目录配置文件  
.gitignore Git 忽略文件列表,指定哪些文件和目录不被包含在版本控制中。
babel.config.js Babel 配置文件,指定 Babel 的编译规则。
package.json 项目的依赖、脚本和其他元数据。
README.md 项目的说明文件,通常用于描述项目、如何安装和使用等信息。
vue.config.js Vue CLI 的配置文件,用于修改默认配置。
yarn.lock 或 package-lock.json 锁定安装的依赖版本,确保项目依赖的一致性。

 


手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


手机扫码阅读本文

Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署【图】
Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署

一站式掌握SpringBoot、MVC、Vue3全流程开发。本书通过全面覆盖从需求分析到上线部署的各个环节,提供了一套完整、实用的软件项目开发方法。它不仅适合有一定编程基础的开发者深入学习,也适合技术管理者和架构师提升项目管理和架构设计的能力。

Vue.js 3.0从入门到实战(微课视频版)【图】
Vue.js 3.0从入门到实战(微课视频版)

手机扫码看79集视频讲解,500多个源码解析+PPT课件,Web前端开发书籍,Vue.js从入门到实战视频教程,深入剖析Vue.js源码

前端工程化:基于Vue.js 3.0的设计与实践【图】
前端工程化:基于Vue.js 3.0的设计与实践

这是一本从0到1详细介绍前端工程化开发的指导手册前端开发领域多位大咖鼎力推荐.前端开发新技能 Vue3 爱猫的程序开发大咖倾力之作

vue3-tutorial vue3-folder