Quasar CLI with Webpack - @quasar/app-webpack
项目目录结构
下面是安装了所有 Quasar 模式的项目的目录结构,不过不用被复杂的目录吓到!
TIP
如果您是一个初学者,那么您只需要关系那么几个文件即可,/quasar.config.js
(Quasar 项目配置文件), /src/router
, /src/layouts
, /src/pages
和可选的 /src/assets
。
.
├── public/ # 纯静态资源 (会被直接复制到产物目录中)
├── src/
│ ├── assets/ # 动态的静态资源(会被 vite 进行处理打包)
│ ├── components/ # 可用于 pages & layoute 中的 .vue 文件组件
│ ├── css/ # CSS/Sass/... 样式文件
| | ├── app.sass
| │ └── quasar.variables.sass # Quasar SASS 变量供您调整
│ ├── layouts/ # 布局页面文件
│ ├── pages/ # .vue 页面文件
│ ├── boot/ # boot 启动文件(项目初始化时会被执行的代码)
│ ├── router/ # Vue Router
| | ├── index.js # Vue Router 初始化
| │ └── routes.js # 定义路由
│ ├── stores/ # Pinia Stores (全局状态管理库 Pinia 和 Vuex 二选一即可)
| | ├── index.js # Pinia 初始化
| │ ├── <store> # Pinia stores...
| │ └── <store>...
│ ├── store/ # Vuex Store (全局状态管理库 Pinia 和 Vuex 二选一即可)
| | ├── index.js # Vuex Store 定义
| │ ├── <folder> # Vuex Store 模块...
| │ └── <folder> # Vuex Store 模块...
│ └── App.vue # 项目的 Vue 根组件
│ └── index.template.html # index.html 模板文件
├── src-ssr/ # SSR 模式专属文件 (例如生产环境的 Node web 服务器)
├── src-pwa/ # PWA 模式专属文件 (例如 Service Worker)
├── src-cordova/ # Cordova 生成的用于构建手机应用的目录
├── src-electron/ # Electron 模式专属文件 (例如主进程文件)
├── src-bex/ # BEX (浏览器插件) 模式专属文件 (like "main" thread)
├── dist/ # 打包构建产物目录
│ ├── spa/ # 例如构建 SPA 时
│ ├── ssr/ # 例如构建 SSR 时
│ ├── electron/ # 例如构建 Electron 时
│ └── ....
├── quasar.config.js # Quasar 项目配置文件
├── babel.config.js # Babeljs 配置文件
├── .editorconfig # editor 配置文件
├── .eslintignore # ESlint 忽略配置文件
├── .eslintrc.js # ESlint 配置文件
├── .postcssrc.js # PostCSS config
├── .gitignore # GIT 忽略配置文件
├── package.json # npm 脚本或者依赖管理
└── README.md # 网站/App 的 readme 文件