red-wrapper
v1.0.0
Published
component based on vue3.x
Downloads
5
Readme
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 np
- 📦 Deploy demo with gh-pages
Try it now!
vue-component-starter require Node >=14
Github Template
Create repo from this template on Github
Clone to local
$ npx degit peterroe/vue-component-starter myComponent
$ cd myComponent
$ pnpm i
Don't forget initialize .git
if you choose to clone locally:
$ git 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.
Update package.json
, and take a unique name
for your npm package
:
{
- "name": "vue-component-starter"
+ "name": "your-component-name"
}
You better also 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
For more details about publish, please check np.
Deploy demo online
You can debug your components online in demo/App.vue
, and they can be deployed directly.
Just run:
$ pnpm deploy:demo
Then visit https://peterroe.github.io/vue-component-starter/
Notice you have to make sure the base
of demo/vite.config.ts
is your github repository name:
export default defineConfig({
// keep the same name as your github repos
base: 'vue-component-starter',
})