Skip to content

jx3box-common-ui 9.0.13

Install from the command line:
Learn more about npm packages
$ npm install @jx3box/jx3box-common-ui@9.0.13
Install via package.json:
"@jx3box/jx3box-common-ui": "9.0.13"

About this version

JX3BOX UI

通用 UI 组件

Step.1 Install

npm install @jx3box/jx3box-common-ui

Step.2 Import

  • 基础布局(标准三栏布局,公共头底,侧边栏)
import JX3BOX_UI from "@jx3box/jx3box-common-ui";
Vue.use(JX3BOX_UI);
  • 指定模块
import xx from "@jx3box/jx3box-common-ui/src/xx.vue";
Vue.component(xx.name, xx);

新增公共组件流程

  1. 打开 index.js,添加对应模块
import Fav from "./src/Fav.vue";
const components = {
    ...Fav,
};
  1. 打开 src/App.vue,引入模块作为测试预览
import Fav from "./Fav.vue";
components: {
    ...
    Fav
},
  1. 在 src/下新建$module.vue 参考其他模块

在页面远程引入公共头

  1. 头部引入文件
<script src="https://oss.jx3box.com/static/jx3box-lib/vue.js"></script>
<script src="https://oss.jx3box.com/static/jx3box-common-ui/newheader.umd.min.js"></script>
<link rel="stylesheet" href="https://oss.jx3box.com/static/jx3box-common-ui/newheader.css"/>
  1. 需要插入的位置
<div id="app">
    <newheader></newheader>
</div>
  1. 初始化脚本
<script>
new Vue({
    components: {
        newheader: newheader,
    },
}).$mount("#app");
</script>

Details


Assets

  • jx3box-common-ui-9.0.13.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0