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);
新增公共组件流程
- 打开 index.js,添加对应模块
import Fav from "./src/Fav.vue";
const components = {
...Fav,
};
- 打开 src/App.vue,引入模块作为测试预览
import Fav from "./Fav.vue";
components: {
...
Fav
},
- 在 src/下新建$module.vue 参考其他模块
在页面远程引入公共头
- 头部引入文件
<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"/>
- 需要插入的位置
<div id="app">
<newheader></newheader>
</div>
- 初始化脚本
<script>
new Vue({
components: {
newheader: newheader,
},
}).$mount("#app");
</script>