/sfc-playground-vant

Try Vant in the Playground. Currently only Vant 3+ is supported

Primary LanguageTypeScriptMIT LicenseMIT

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