Vue3项目目录结构以及变化 一图看懂

已于 2024-01-11 16:23:54 修改
阅读量576 收藏 8
点赞数 9
文章标签： vue.js javascript 前端
于 2024-01-11 11:16:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58462450/article/details/135521819
版权

通过create vue创建vue项目后的基本框架如下

整体变化

Vite.config.js

Vue项目的配置信息，如：端口号等

Package.json

项目配置文件，包括项目名，版本号，依赖包，版本等

package-lock.json

项目配置文件（不需要修改）

index.html

默认首页

node_modules

下载的第三方包存放目录

public

公告资源

Src

后面百分之90的代码都是在这写

assets

静态资源目录，存放图片，字体.....

components

组件目录，存放通用组件

App.vue

根组件

main.js

入口文件

Unksoo
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈Visual Studio 2019 Vue项目的目录结构
08-19
当你在Visual Studio 2019中创建一个Vue项目时，你会看到以下基本的目录和文件结构： 1. **public** - 这个目录包含了应用的静态资源，如HTML、CSS和JavaScript文件。其中最重要的文件是`index.html`，它是Vue应用...
Vue 基于vite构建vue3项目 以及基础语法演示
最新发布
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
Vue 3项目的目录结构
qq_43435403的博客
12-10 442
存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。此外，当执行了yarn build命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。使用vite创建完VUE项目后，使用VS Code编辑器打开项目目录，可以看到一个默认生成的项目目录结构。：存放可编译的静态资源文件，例如图片、样式文件等。：默认的主渲染页面文件，同时也是页面的入口文件。：项目的入口文件，用于创建Vue应用实例。：存放单文件组件，即.vue文件。
Vue3的目录结构
小莓的博客
03-03 5051
1：dist目录 存放打包之后的代码文件 2：node_modules npm 加载的项目依赖模块 3：public 公共资源目录 4：src 要开发的目录。里面包含了几个目录及文件： ：assets 存放每个页面对应的css、js公共函数以及图片文件 ：components 存放项目使用的公共组件 ：router 存放vue-router相关的文件 ：types 存放typescript 支持vue文件的相关配置文件 ...
VUE3 -创建项目并整理目录
wmuj_的博客
06-01 250
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来。样式资源 - 把 common.scss 文件放到 styles 目录下。图片资源 - 把 images 文件夹放到 assets 目录下。基于vite的项目默认不支持css预处理器，需要开发者单独安装。配置别名路径可以在写代码时联想提示路径。
认识vue3.0项目的目录结构
m0_61472704的博客
02-08 3009
上一篇笔记新建一个vue3.0项目 新建项目后，用vscode打开，会看到项目目录，如下图 来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于存放静态资源，不会被压缩、合并 src 主要开发内容都在这个文件夹下，包含以下几项： ① assets：存放图片、logo ②components:：存放组件 ③ router：存放路由（路由用于界面之间跳转） ④ store：仓库...
Vue3入门系列（二）目录结构认识
云逸的博客
12-14 2044
Vue3项目npm与vite创建的脚手架项目结构说明。
【04Vue3 目录结构】VUE3目录结构概述结构详解目录结构的作用注意事项
燃正科技
06-08 4502
在 Vue3 项目中，通常采用以下目录结构组织代码： 目录结构详解 ：该目录存放不经过 webpack 构建处理的静态资源文件，例如 HTML 文件、图标等。 ：主要代码存放目录。 ：用于存放项目中使用的静态资源，例如图片、字体等。 ：存放 Vue 组件文件，通常按功能或模块进行组织。 ：存放页面级组件，用于组织多个组件形成完整页面。 ：项目的根组件，包含应用的整体结构和布局。 ：Vue3 的入口文
Vue3 入门笔记 ---- 创建Vue3项目和目录结构解释
panzhixiang
10-17 1275
Vue3入门
Vue+webpack项目配置便于维护的目录结构教程详解
10-17
在构建Vue+webpack项目时，一个清晰且有组织的目录结构对于项目的长期维护至关重要。合理的目录结构能够提高代码可读性，便于团队协作，并降低出错的可能性。以下是一些关于如何配置Vue+webpack项目目录结构的建议：...
vue3项目模板，优雅的vue3项目组织.zip
11-02
"优雅的vue3项目组织"是一个Vue3项目的模板，旨在提供一种良好的代码结构和组织方式，帮助开发者快速启动新项目。这个模板可能包含了最新的Vue3特性、最佳实践以及一些辅助工具，比如Vite。 Vite是由Vue.js的作者尤...
基于vue-cli创建的项目的目录结构及说明介绍
08-28
基于Vue-cli创建的项目目录结构及说明介绍 本文将详细介绍基于Vue-cli创建的项目目录结构，并对每个文件夹和文件进行详细的说明。 build文件夹 该文件夹下包含了项目构建相关的代码，主要包括： * build.js：...
vue3目录结构详细说明及文件命名规范
残阳曦月
01-18 4352
Vue组件：文件名和引用时都应采用PascalCase，即每个单词首字母大写的驼峰命名法，例如 MyComponent.vue。目录：推荐使用小写字母和短横线 - 来分隔单词，例如 components/common。Vue3 项目的目录结构通常遵循一定的组织原则，旨在提高代码的可读性、可维护性和模块化。在 Vue3 中，单文件组件 (SFC) 的内部结构也遵循特定规范，通常包含 、普通变量：采用驼峰命名法（camelCase），例如 myVariable。
详细介绍 Vue3 的常见目录结构
网络技术联盟站
07-17 3660
Vue3 的目录结构通常是基于传统的前端项目开发约定而来。├── src/├── tests/下面将对每个目录和文件进行详细说明。public/public目录存放了与业务逻辑无关的静态资源，例如index.html等。index.html是应用程序的入口文件，它被打包后生成到生产环境中。您可以在其中引入外部脚本或样式表，例如 CDN 上的库文件。src/src目录是您的主要工作目录，包含了整个应用程序的源代码。assets/目录用于存放应用程序使用的静态资源文件，例如图片、样式表等。
vue3 的项目结构详解
weixin_49827467的博客
09-13 2191
创建好项目之后，在项目名称下，刷新，会出现一系列的目录，那么这些目录又代表什么意思呢？ 如上图，我创建的项目名称为ewshop,有三个大目录： 、node_modules，npm 加载的项目依赖模块，配置package.json之后执行npm install后自动创建的文件夹；依赖的包通过package.json进行查看版本； public目录： 项目公共目录，存放静态资源(img、js、css)等公共资源； public 目录下：有两个文件： (1)favicon.ico 是图标 (2) inde
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
JZevin的博客
10-15 8430
Vue项目的详细目录结构解析
Vue 3第二章：Vite文件目录结构及SFC语法
to_the_Future的博客
02-24 4437
Vue3 支持使用单文件组件（SFC）来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中，使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子：
Vue 目录结构 vite 项目
xiaowude_boke的博客
08-14 1591
Vue 目录结构 vite 项目
（一）创建Vue3项目以及项目结构
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
04-19 1101
vue3，vue项目结构
vue3项目的目录结构
05-30
Vue3 项目的目录结构与 Vue2 的略有不同，主要是多了一个 `src/main.js` 文件，具体的目录结构如下： ``` project/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── assets/ │ ├── components/ │ ├── router/ │ ├── store/ │ ├── views/ │ ├── App.vue │ └── main.js ├── .eslintrc.js ├── babel.config.js ├── package.json └── ... ``` 其中： - `public/` 目录存放静态资源，如 `index.html` 文件、图片等； - `src/` 目录存放源代码； - `src/assets/` 目录存放静态资源，如图片、字体等； - `src/components/` 目录存放组件； - `src/router/` 目录存放路由配置； - `src/store/` 目录存放 Vuex 的状态管理相关代码； - `src/views/` 目录存放页面组件； - `src/App.vue` 是根组件； - `src/main.js` 是项目的入口文件，包括创建 Vue 实例、挂载路由、挂载 Vuex 状态管理等； - `.eslintrc.js` 是 ESLint 的配置文件； - `babel.config.js` 是 Babel 的配置文件； - `package.json` 是项目的配置文件，包括项目的依赖、脚本等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值