Vitesse-Uni-App 开源项目教程

1. 项目的目录结构及介绍

Vitesse-Uni-App 是一个基于 Vue 3 和 Vite 的跨平台应用开发框架。项目的目录结构如下：

vitesse-uni-app/
├── src/
│   ├── assets/          # 静态资源文件
│   ├── components/      # 公共组件
│   ├── pages/           # 页面组件
│   ├── App.vue          # 主应用组件
│   ├── main.ts          # 项目入口文件
│   ├── manifest.json    # 应用配置文件
│   ├── pages.json       # 页面配置文件
│   └── uni.scss         # 全局样式文件
├── public/              # 公共资源文件
├── index.html           # 项目主页
├── vite.config.ts       # Vite 配置文件
└── package.json         # 项目依赖和脚本

目录结构介绍

• src/：项目的源代码目录。
  • assets/：存放静态资源文件，如图片、字体等。
  • components/：存放公共组件，可以在多个页面中复用。
  • pages/：存放页面组件，每个页面通常对应一个子目录。
  • App.vue：主应用组件，包含应用的全局布局和样式。
  • main.ts：项目入口文件，负责初始化应用。
  • manifest.json：应用配置文件，包含应用的基本信息和权限配置。
  • pages.json：页面配置文件，定义应用的页面路由和导航栏样式。
  • uni.scss：全局样式文件，定义应用的全局样式。
• public/：存放公共资源文件，如 favicon.ico 等。
• index.html：项目主页，Vite 会将其作为入口文件。
• vite.config.ts：Vite 配置文件，定义项目的构建和开发服务器配置。
• package.json：项目依赖和脚本，定义项目的依赖包和脚本命令。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，它负责初始化应用并挂载到 DOM 中。以下是 main.ts 的主要内容：

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import './uni.scss'

const app = createApp(App)
app.mount('#app')

启动文件介绍

• createApp(App)：创建一个 Vue 应用实例，并传入主应用组件 App.vue。
• app.mount('#app')：将应用实例挂载到 DOM 中的 #app 元素上。
• import './registerServiceWorker'：注册 Service Worker，用于实现离线缓存和推送通知等功能。
• import './uni.scss'：引入全局样式文件 uni.scss。

3. 项目的配置文件介绍

项目的配置文件主要包括 manifest.json 和 pages.json。

manifest.json

manifest.json 是应用的配置文件，包含应用的基本信息和权限配置。以下是一个示例：

{
  "name": "Vitesse-Uni-App",
  "description": "A cross-platform app development framework based on Vue 3 and Vite",
  "version": "1.0.0",
  "author": "uni-helper",
  "permissions": {
    "audio-capture": {
      "description": "Required to capture audio using microphone"
    },
    "video-capture": {
      "description": "Required to capture video using camera"
    }
  }
}

pages.json

pages.json 是页面配置文件，定义应用的页面路由和导航栏样式。以下是一个示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],