Component template for Vue
This tip #7 brings you a component builder using vue-cli and webpack
Suppose you need to create a "remaining characters" counter for a textarea, just like the one from twitter. And publish to npm as vue-remaining-chars.
Let's do it
First you need the official vue command-line interface installed globally in you system.
npm i -g vue-cli
# or
yarn global add vue-cli
Them we need to create a new project based on the template.
vue init vuejs-tips/vue-component-template vue-remaining-chars
# answer all questions (ENTER)
cd vue-remaining-chars
npm run dev
# Open http://localhost:4000/ and enjoy your new component!
Edit your component in src/Component.vue and test in demo/demo.vue.
When you be ready to deploy, make the necessary adjusts in demo/index.html and test with:
npm run dist # generate final component at ./dist/
npm run dist:demo # generate demo app at ./demo/
npm i -g serve # install serve globally to test static pages
npm run demo:open # Open demo at http://localhost:3000/
Now you can increment the version and publish to npm (free account required)
npm version patch # increments version from 0.0.1 to 0.0.2
npm publish
In the next tips, we are going to publish our tag component to npm using this template.