base-wc-ui v1.0.3

base-wc-ui

介绍

基于Web Components的ui框架-demo

安装

npm install base-wc-ui --save

使用说明

index.js

import Wc from 'base-w-ui'
import Home from './Home.vue'
import Detail from './Detail.vue'
import { createStore } from 'redux';
import reducers from './reducer'

// 设置路由
const routes = {
  routes: [
    {
      path: '/',
      component: Home,
      child: [
        {
          path: '/detail',
          component: Detail
        },
      ]
    },
  ]
}

// 用 redux 创建 store
const store = createStore(reducers);

// 启动项目
Wc.start(document.getElementById('root'), routes, store)

Home.vue, 使用类似vue组件的语法

<template>
  <div>
    <div class="div">this is Home</div>
    <!-- 路由跳转 -->
    <wc-link path="/detail" label="go detail"></wc-link>
    <!-- 设置子路由 -->
    <wc-route-view></wc-route-view>
  </div>
</template>

<script>
import {WebComponents, Link, RouteView} from 'base-wc-ui'
export default class MyHome extends WebComponents {
  constructor() {
    super()
  }
  /*
  connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
  disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
  adoptedCallback: 当自定义元素被移动到新文档时被调用。
  attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。
  */
  connectedCallback() {
    console.log('connectedCallback')
  }
  disconnectedCallback() {
    console.log('disconnectedCallback')
  }
  adoptedCallback() {
    console.log('adoptedCallback')
  }
  attributeChangedCallback() {
    console.log('attributeChangedCallback')
  }
}
</script>

<style>
  .div {
    background: #00f;
    border: 1px solid #0f0;
  }
</style>

因为使用了vue的语法，所以还需要设置 .vue 文件的loader webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: path.resolve(__dirname, './node_modules/base-wc-ui/loader/vue-loader.js'),
          },
        ],
      }
    ],
    ...
  },
  ...
};