Skip to content

Latest commit

 

History

History
100 lines (65 loc) · 2.25 KB

README.md

File metadata and controls

100 lines (65 loc) · 2.25 KB
Raw

Vue-Component-Starter

A template to help you create vue3.x component

You can create yourself component quickly with it.

Feature

  • ⚡️ Serve and build based on vite
  • ✨ Format with pretty-quick
  • 🤙🏻 Eslint support
  • ⚙️ Unit Testing with Vitest
  • 🦾 TypeScript, of course
  • 🎈 Release package easily with bumpp
  • 📦 Deploy demo with gh-pages

Try it now!

vue-component-starter require Node >=16

Github Template

Create repo from this template on Github

Try it now!

$ pnpm create un
# or 
$ pnpm create un [my-component] -t vue-component-starter

Init git hook(optional)

$ pnpm git-hook-init

Development

Just run and visit http://localhost:3000

$ pnpm dev

Build

To build the Component, run:

$ pnpm build

And you will see the generated fie in dist that ready to be served.

Publish your component

Before you publish your component, you must give your component a new name in order to prevent conflicts with other people's component names.

You better update the registered component name in src/index.ts:

export function install(app: App) {
- app.component('MyComponent', MyComponent)
+ app.component('yourComponentName', MyComponent)
}

Run pnpm build again to get the right files.

Make sure your are logged into npm, and run:

$ pnpm release 
$ npm publish

For more details about publish, please check bumpp.

Deploy demo to github page

  1. Create a public repository in github. And keep the repository's name same as the package.json's name

  2. Link the repository to the github repo

$ git init
$ git remote add origin [email protected]:xxx/xxxx.git
  1. You can debug your components online in demo/App.vue, and they can be deployed directly.

Just run:

$ pnpm deploy:demo

Then visit https://[your-username].github.io/[your-component-name]/, such as https://peterroe.github.io/vue-component-starter/