目录结构 | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

目录结构

下面是安装了所有 Quasar 模式的项目的目录结构，不过不用被复杂的目录吓到！

TIP

如果您是初学者，只需要关注 /quasar.config 文件（Quasar 项目配置文件）、/src/router、/src/layouts、/src/pages 以及可选的 /src/assets 即可。

public

# 纯静态资源（会被直接复制到产物目录中）

src/

assets/

# 动态资源（会被 Vite 处理打包）

components/

# 可用于 pages 和 layouts 中的 .vue 组件

css/

# 项目的 CSS/Sass/... 样式文件

app.sass

quasar.variables.sass

# Quasar Sass 变量，供您自定义调整

layouts/

# 布局 .vue 文件

pages/

# 页面 .vue 文件

boot/

# Boot 启动文件（项目初始化代码）

router/

# Vue Router

index.js

# （或 .ts）Vue Router 定义

routes.js

# （或 .ts）路由规则定义

typed-router.d.ts

# 仅 TypeScript 项目，且启用了 build.filenameBasedRouting 时需要

stores/

# Pinia Stores

index.js

# （或 .ts）Pinia 初始化

<store>

# Pinia stores...

<store>...

App.vue

# 项目的 Vue 根组件

src-ssr/

# SSR 模式专属代码（例如生产环境的 Node.js Web 服务器）

src-pwa/

# PWA 模式专属代码（例如 Service Worker）

src-capacitor/

# Capacitor 生成的用于构建移动应用的目录

src-cordova/

# Cordova 生成的用于构建移动应用的目录

src-electron/

# Electron 模式专属代码（例如主进程文件）

src-bex/

# BEX（浏览器扩展）模式专属代码（例如主线程）

dist/

# 打包构建产物输出目录

spa

# 例如构建 SPA 时的产物

ssr

# 例如构建 SSR 时的产物

electron

# 例如构建 Electron 时的产物

...

quasar.config.js

# （或 .ts）Quasar 项目配置文件

index.html

# index.html 模板文件

.gitignore

# GIT 忽略配置文件

.editorconfig

# EditorConfig 编辑器配置文件

eslint.config.js

# ESLint 配置文件

postcss.config.js

# PostCSS 配置文件

jsconfig.json

# 编辑器配置文件（未使用 TypeScript 时）

tsconfig.json

# TypeScript 配置文件

env.d.ts

# 仅 TypeScript 项目需要

package.json

# npm 脚本与依赖管理

README.md

# 网站/App 的 readme 文件

发现错误？在浏览器中编辑此页