1.0.0 • Published 3 years ago

v-builder-template v1.0.0

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

Template Builder

How to use plugin

Solution 1: Build Package (Style Not Effect and Include Store) 1. Run Command

yarn add vue-builder-template
  1. Run Command
yarn dev

or

npm run dev
  1. Setup nuxt.config.js file (only nuxt.js)
    "plugins": [
        { "src": "~/plugins/<filename>", "ssr": false }
    ]
  1. Import Package to main.ts or main.js file
    import Builder from 'vue-builder-template/src/main'

    Builder // declare create
  1. Use Component
    <div
        id="builder"
        ref="builder"
        data-id="builder"
        :data-prop-template="JSON.stringify(propTemplateJson)"
        @click="onUpdateTemplate"
    />
attributevaluetypedescription
idbilderstringfor access element
refup to youstringfor access result template
data-idup to youstringfor create element (default: builder). Mutiple element should be setup difference name
:data-prop-template (optional)up to youstringfor setup default prop your template json
@click="<YOUR_FUNCTION_NAME>" (optional)up to youfunctionfor get result on function
  1. 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"
  1. Run Command
yarn add vue-builder-template

or

npm install vue-builder-template --save
  1. 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>
  1. Import Component in main.ts or main.js
    import Components from 'vue-builder-template/src/plugins/Index.ts'

    Vue.use(Components)
  1. Use Component
    <BuilderTemplate></BuilderTemplate>

How to Build and Publish Package (Self Reminder)

  1. Setup package.json (Change version)
  2. Setup tsconfig.json
  3. Run Command
yarn build:ts

or

npm run build:ts
  1. Register NPM
  2. In Your Project Plugin npm login and type username, password, email
  3. Run Command (Every publish must be change version in package.json)
npm publish
  • remark: Unpublish version Run npm unpublish <PACKAGE_NAME>@<VERSION> such as npm unpublish vue-builder-template@0.0.1
  • remark: Deprecate version Run npm deprecate -f <PACKAGE_NAME>@<VERSION> '<REASON>' such as npm 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 as npm owner add npm vue-builder-template
  • remark: Delete Your User of Package Run npm owner rm <USER> <PACKAGE_NAME> such as npm 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

See Configuration Reference.