visionOS

The goal of this project is to create a visionOS-style web personal homepage that allows us to experience the visual experience of Apple Vision Pro on the front-end as well. This project will use Vue3, TypeScript, Lottie, and other technologies to create a visually stunning and interactive experience.

这个项目的目标是创建一个 visionOS 风格的 Web 个人主页，使我们在前端也能体验 Apple Vision Pro 的视觉体验。此项目将使用 Vue3、TypeScript、Lottie 等技术，创建一个视觉上令人惊叹和交互式的体验。

Another reason for creating this project is to enhance my coding skills, such as trying and practicing new techniques or interesting coding implementations (such as Vue3, TypeScript, Lottie, etc.). If you find it interesting, you can light up the "Star" button in this repository. Of course, you are also welcome to contribute to this project, provide interesting suggestions, or participate in the coding of the project.

这个项目创建的另一个原因是为了提升我的编码技术，例如尝试和锻炼一些新技术或有趣的编码实现方式（如 Vue3、TypeScript 和 Lottie 等），如果觉得有趣可以点亮此存储库的“Star”按钮。当然，也欢迎你为此项目做出贡献，提出有趣的建议，或者参与进项目的编码。

The project is currently in the design and development phase, and the project will be updated continuously. The project will be divided into several stages, and the project will be updated with new features and improvements at each stage.

项目目前处于设计和开发阶段，将持续更新。项目将分为几个阶段，每个阶段将会更新新的功能和改进。

Optional Features

This project was created through create-vue, the official Vue project scaffolding tool.

• Add TypeScript
• Add JSX Support
• Add Vue Router for Single Page Application development
• Add Pinia for state management
• Add Vitest for Unit testing
• Add an End-to-End Testing Solution
• Add ESLint for code quality
• Add Prettier for code formatting
• Add Vue DevTools 7 extension for debugging (experimental)

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Type-Check, Compile and Minify for Production

pnpm run build

Lint with ESLint

pnpm run lint

Stargazers over time

Design Reference

• Apple Vision Pro

• Learn more about developing for visionOS

• Design for visionOS

• Spotlight on: Developing for visionOS (June 5, 2023)

• Spotlight on: Developer tools for visionOS (June 21, 2023)

• Q&A: Spatial design for visionOS (December 7, 2023)

• Q&A: Building apps for visionOS (January 11, 2024)

License

MIT License

Copyright (c) 2024-present Barry-Flynn (百里飞洋)