v-cen-product
Usage:
npm i @tpnn88/vcenproduct
# usage in component
import '@tpnn88/vcenproduct/dist/vcenproduct.css'
import components from '@tpnn88/vcenproduct'
export default {
name: "Index",
components: { ...components }
}
# in template
<v-cen-product :config="{uri: `http://localhost:8080/v1/graphql`}"/>
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
HOW TO CREATE NPM VUE PACKAGES
##1. To install Vue CLI
npm install -g @vue/cli
##2. To create a new project
vue create your-packgage-name
##3. Build your components in src/components/ ex: src/components/Button.vue ##4. create index.js in in src/components/
//index.js
import Vue from 'vue';
import Button from './Button.vue';
import Alert from './Alert.vue';
const Components = {
Button,
Alert,
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
##5. modify package.js
note: name, version, private, files, build-bundle, main
{
"name": "parseobjects",
"version": "1.0.0",
"private": false,
"main": "./dist/your-packgage-name.common.js",
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js",
"plugins/*"
],
"scripts": {
"serve": "vue-cli-service serve --host localhost",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name your-packgage-name ./src/components/index.js"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
##6. build package
npm run build-bundle
To register on npm:
npm adduser
To login
npm login
##7. add github repository
git remote add origin https://github.com/tpnn88/vcenproduct.git
git branch -M main
git push -u origin main
npm i
# add repository to package.js
...
"repository": {
"type": "git",
"url": "git+https://github.com/tpnn88/vcenproduct.git"
},
##8. Publish your components library to NPM
npm publish --access public
##9. Installing your package in a different project
npm i your-packgage-name
usable
<script>
import parseobjects from ‘parseobjects’;
components: {...parseobjects}
</script>
<template>
<Button/>
<Alert/>
</template>