『VUE』02. 项目结构（详细图文注释）

最新推荐文章于 2024-05-02 11:47:29 发布

发现你走远了

最新推荐文章于 2024-05-02 11:47:29 发布

阅读量991

点赞数 31

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u011027547/article/details/136643101

版权

vue零基础入门专栏收录该内容

18 篇文章 0 订阅

订阅专栏

node_modules 项目运行依赖文件夹

nodejs安装的依赖,用npm 安装生成的

npm install

在这里插入图片描述

public 资源文件夹浏览器图标等

存放不经 webpack 处理的静态资源，如 index.html、favicon.ico 等。
在这里插入图片描述

src 源码文件夹(核心)

assets：用于存放静态资源文件，如图片、字体等。
components：Vue 组件，可以按功能或页面划分子目录。
views：页面级别的组件，通常对应路由的不同页面。
router：Vue Router 相关配置文件。
store：Vuex 相关文件，用于状态管理。
services：用于放置封装的服务或 API 请求相关文件。
utils：工具函数或常用功能函数。
styles：全局样式文件。
App.vue：根组件，整个应用的入口。
main.js：Vue 应用实例化和一些全局配置。

assets

存放的公共的css样式,这就是为什么不写css但是还是会有样式的原因.
在这里插入图片描述

package.json 项目的依赖包配置文件

name: 项目名称为 “vue-project”。
version: 项目版本号为 “0.0.0”。
private: 设置为 true 时，防止意外发布代码。
type: 指定模块类型为 ES 模块。
scripts: 定义了几个 npm 脚本命令，分别用于开发、构建和预览项目。
dev: 使用 Vite 运行项目进行开发。
build: 使用 Vite 进行项目构建。
preview: 使用 Vite 预览构建后的项目。
dependencies: 生产环境依赖。
vue: Vue 框架的版本为 “^3.4.21”。
devDependencies: 开发环境依赖。
@vitejs/plugin-vue: Vite 插件，用于处理 Vue 单文件组件。
vite: Vite 构建工具的版本为 “^5.1.5”。

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.1.5"
  }
}