page-builder-core v1.0.3

newpb

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

page-builder-core

1.在vue脚手架项目中执行

npm install page-builder-core --save

2.安装项目依赖 element-ui , @baozun/ace-ui

npm install element-ui --save

npm install @baozun/ace-ui --save

3.在main.js中添加

import ElementUI from 'element-ui';

import AceUI from '@baozun/ace-ui';
import '@baozun/ace-ui/dist/main.css';

import pbCore from "page-builder-core";
import 'page-builder-core/dist/main.css'
Vue.use(pbCore);

Vue.use(AceUI);
Vue.use(ElementUI);

pbCore.setApiAddress('https://casaba-gateway-sit.baozun.com/creator','https://unexapi-sandbox.baozun.com','sit');

sessionStorage.setItem('pageBuilder_userToken','b201db48224f3bedb8882e6b81b47753bd6f8e1c');
sessionStorage.setItem('pageBuilder_tenantCode','88008337');
sessionStorage.setItem('pageBuilder_storeCode','1905239209');
sessionStorage.setItem('pageBuilder_templateId','190');

pbCore.setApiAddress 是设置编辑器内接口地址的，默认为

BASE_API = 'https://casaba-gateway.baozun.com/creator';
UNEX_API = 'https://unexapi.baozun.com';

下面四个sessionStorage里的值是编辑器必须值，在初始化编辑器前声明赋值即可。

4. 在main.js中添加编辑器vuex配置

new Vue({
  router,
  store: pbCore.store, // 添加这行
  render: h => h(App)
}).$mount("#app");

如果项目想用vuex，可以继承成 pbCore.storeOptions，添加自己的状态管理后 store: new Vuex.Store(storeOptions);

5. 任意页面组件中

<template>
  <pbHome>
    <pb-header/>
    <pb-left/>
    <pb-main/>
    <pb-right/>
  </pbHome>
</template>

<script>
export default {
  name: "home",
};
</script>