https://github.com/zhixiaoqiang/sfc-playground-vant
Try Vant in the Playground. Currently only Vant 3+ is supported
https://github.com/zhixiaoqiang/sfc-playground-vant
playground repl sfc typescript vant vue vue3
Last synced: 4 months ago
JSON representation
Try Vant in the Playground. Currently only Vant 3+ is supported
- Host: GitHub
- URL: https://github.com/zhixiaoqiang/sfc-playground-vant
- Owner: zhixiaoqiang
- License: mit
- Created: 2022-04-05T10:37:00.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-03T04:51:35.000Z (4 months ago)
- Last Synced: 2026-02-03T18:26:54.420Z (4 months ago)
- Topics: playground, repl, sfc, typescript, vant, vue, vue3
- Language: TypeScript
- Homepage: https://sfc-playground-vant.vercel.app/
- Size: 9.09 MB
- Stars: 28
- Watchers: 1
- Forks: 3
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# SFC Playground with Vant
> This is an Vant SFC Playground. Click the [vercel.app](https://sfc-playground-vant.vercel.app/) Or [zhixiaoqiang.github.io](https://zhixiaoqiang.github.io/sfc-playground-vant/) link to view.
> NOTE! The reason why this is designed to manually `import { injectVant }` is to be more universally compatible with any component library, Not only Vant.
## What's inside?
Try Vant in the Playground. Currently only Vant 3+ is supported
### Features
- β‘οΈ Vant 3+
- β‘οΈ PreLoad ImportsFile,Instantly display content([e0d5c6](https://github.com/zhixiaoqiang/sfc-playground-vant/commit/e0d5c6cd56ced1805b07ff6cddb9fe759c8cfbf5))
- π€π» Free switch Vant/Vue version, and more
- π οΈ Rich Features
- βοΈ Deploy on Netlify/vercel/GitHub Pages, zero-config
- π‘ Support the Typescript
- π Easy to create your own
- π€© Download project support generated package.json by user input ([13ee3f](https://github.com/zhixiaoqiang/sfc-playground-vant/commit/13ee3f8ec73a6c77a0146b3625464854d2aab713))
- π οΈ Smarter and more efficient npm scripts
### Future Features
> coming soon
- [ ] π οΈ Support Vant dark mode
- [ ] π οΈ Support on-demand introduction
- [ ] π οΈ CLI
- [ ] π Fully Typed API
- [ ] π Switch CDN
### Utilities
This SFC Playground has some additional tools already setup for you:
- [pnpm](https://pnpm.io) as a packages manager
- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting
- [Vant](https://vant-contrib.gitee.io/vant) a Lightweight Mobile UI Components built on Vue
- [@vue/repl](https://github.com/vuejs/repl) for Vue SFC REPL as a Vue 3 component
## Get Started
1. Click `Use this template`, and clone your repo `degit https://github.com/zhixiaoqiang/sfc-playground-vant#main` or `git clone https://github.com/zhixiaoqiang/sfc-playground-vant --depth 1`. [degit](https://github.com/Rich-Harris/degit)
2. Adjust the following files.
```bash
src
βββ components
β βββ npm-version-switch
β βββ helps.ts # add version switch feature
βββ config.ts # config welcome codeγCDNγadditionalFiles...
βββ store.ts # includes base functions...
```
then it'll be your repository totally.
### Build
To build the playground, run the following command:
```bash
pnpm build
```
### Develop
To develop the playground, run the following command:
```bash
pnpm dev
```
### Create Changelog
1. Execute `pnpm changeset` to add a changeset.
2. Execute `pnpm changeset version` to change `CHANGELOG.md`.
3. Execute `pnpm changeset publish` to publish `npm library`. [can skip]
4. Execute `git commit`, this command will trigger `lint-staged` and `commitzen`.
5. Execute `git push` to trigger `Github Actions` or `vercel Deploy`
## CHANGELOG
Please refer to [CHANGELOG](https://github.com/zhixiaoqiang/sfc-playground-vant/blob/main/CHANGELOG.md) for details.
Inspired by [Evan You's](https://github.com/yyx990803) [Vue SFC Playground](https://sfc.vuejs.org/)
## License
MIT