1.0.0 • Published 4 years ago
v-builder-template v1.0.0
Template Builder
How to use plugin
Solution 1: Build Package (Style Not Effect and Include Store) 1. Run Command
yarn add vue-builder-template
- Run Command
yarn dev
or
npm run dev
- Setup nuxt.config.js file (only nuxt.js)
"plugins": [
{ "src": "~/plugins/<filename>", "ssr": false }
]
- Import Package to main.ts or main.js file
import Builder from 'vue-builder-template/src/main'
Builder // declare create
- Use Component
<div
id="builder"
ref="builder"
data-id="builder"
:data-prop-template="JSON.stringify(propTemplateJson)"
@click="onUpdateTemplate"
/>
attribute | value | type | description |
---|---|---|---|
id | bilder | string | for access element |
ref | up to you | string | for access result template |
data-id | up to you | string | for create element (default: builder). Mutiple element should be setup difference name |
:data-prop-template (optional) | up to you | string | for setup default prop your template json |
@click="<YOUR_FUNCTION_NAME>" (optional) | up to you | function | for get result on function |
- Access Result Template
JSON.parse(this.$refs.<REF_NAME>.dataset.resultTemplate)
Solution 2: Git Repo (Style Effect and Exclude Store) 1. Add Dependencies in package.json
"vue-builder-template": "git+ssh://git@bitbucket.org:3dsinteractive/pam-builder.git"
- Run Command
yarn add vue-builder-template
or
npm install vue-builder-template --save
- Create .env file
NODE_ENV=development
VUE_APP_TITLE=Builder
VUE_APP_ECOM_CMS_API=<Base URL API image storage>
VUE_APP_ADMIN_USERNAME=<Username for access to image storage>
VUE_APP_ADMIN_PASSWORD=<Password for access to image storage>
[optionnal]
VUE_APP_BASE_URL=<Base URL API image storage>
VUE_APP_TOKEN_IMAGE_STORAGE=<Token for access to image storage>
- Import Component in main.ts or main.js
import Components from 'vue-builder-template/src/plugins/Index.ts'
Vue.use(Components)
- Use Component
<BuilderTemplate></BuilderTemplate>
How to Build and Publish Package (Self Reminder)
- Setup package.json (Change version)
- Setup tsconfig.json
- Run Command
yarn build:ts
or
npm run build:ts
- Register NPM
- In Your Project Plugin npm login and type username, password, email
- Run Command (Every publish must be change version in package.json)
npm publish
- remark: Unpublish version Run
npm unpublish <PACKAGE_NAME>@<VERSION>
such asnpm unpublish vue-builder-template@0.0.1
- remark: Deprecate version Run
npm deprecate -f <PACKAGE_NAME>@<VERSION> '<REASON>'
such asnpm deprecate -f vue-builder-template@0.0.1 'Have New Version'
- remark: Add User NPM for Delete Package Run
npm owner add npm <PACKAGE_NAME>
such asnpm owner add npm vue-builder-template
- remark: Delete Your User of Package Run
npm owner rm <USER> <PACKAGE_NAME>
such asnpm owner rm username vue-builder-template
Project setup
yarn install
Compiles and hot-reloads for development
yarn dev
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
Customize configuration
1.0.0
4 years ago