Skip to content

zhixiaoqiang/sfc-playground-vant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

SFC Playground with Vant

This is an Vant SFC Playground. Click the vercel.app Or zhixiaoqiang.github.io link to view.

main-pic

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)
  • ๐Ÿค™๐Ÿป 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)
  • ๐Ÿ› ๏ธ 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 as a packages manager
  • TypeScript for static type checking
  • ESLint for code linting
  • Prettier for code formatting
  • Vant a Lightweight Mobile UI Components built on Vue
  • @vue/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
  2. Adjust the following files.
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:

pnpm build

Develop

To develop the playground, run the following command:

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 for details.

Inspired by Evan You's Vue SFC Playground

License

MIT