# base-wc-ui

> 基于Web Components的ui框架-demo

Latest version **1.0.3** (published 2021-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install base-wc-ui
pnpm add base-wc-ui
yarn add base-wc-ui
bun add base-wc-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-04-19 |
| First published | 2021-04-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | linshiding |
| Maintainers | linshiding |

## Links

- npm: https://www.npmjs.com/package/base-wc-ui
- Repository: git@gitee.com:base-wc-ui/base-wc-ui
- npm.io page: https://npm.io/package/base-wc-ui

## Dependencies (1)

- [redux](https://npm.io/package/redux.md) ^4.0.5

## Recent versions

- 1.0.3 (latest) — 2021-04-19
- 1.0.2 — 2021-04-17
- 1.0.1 — 2021-04-16
- 1.0.0 — 2021-04-15

## README

# base-wc-ui

#### 介绍
基于Web Components的ui框架-demo
#### 安装
```bash
npm install base-wc-ui --save
```
#### 使用说明
index.js
```javascript
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组件的语法
```javascript
<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
```javascript
...
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: path.resolve(__dirname, './node_modules/base-wc-ui/loader/vue-loader.js'),
          },
        ],
      }
    ],
    ...
  },
  ...
};
```

---
_Source: https://npm.io/package/base-wc-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._