kz-header
筷子共用头部组件
USEAGE
<template> <div id="app"> <kz-header :nav="header.nav" :profile="header.profile" :lang="header.lang"></kz-header> </div></template> <script>// 引入kz-header组件import 'kz-header/dist/index.css'import kzHeader from 'kz-header'// 或// import { kzHeader } from 'kz-header' export default { name: 'app', data () { return { // 头部组件配置 header: { // 导航 nav: [], // 用户信息 profile: {}, // 语言配置,可以不设置 lang: { list: [{ value: 'zh', title: '中文' }, { value: 'en', title: 'English' }, { value: 'tw', title: '台灣' }], selected: '中文' } } } }, components: { // 注册组件 KzHeader }, // 组件创建去初始化头部 created () { // 异步获取数据 const fetch = async () => { // 获取导航接口 let nav = await this.$http.get('/static/mock/nav.json').then(res => res.body) // 获取用户信息接口 let user = await this.$http.get('/static/mock/user.json').then(res => res.body) // -- 更新数据 this.header.nav = nav this.header.profile = user } fetch() }}</script>
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
For detailed explanation on how things work, checkout the guide and docs for vue-loader.