# we-design

> a collect of mini program UI components.

Latest version **0.0.157** (published 2020-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install we-design
pnpm add we-design
yarn add we-design
bun add we-design
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.157 |
| Published | 2020-09-11 |
| First published | 2018-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 321.3 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zhaojintian |
| Maintainers | zhaojintian |
| Keywords | uni-app, ui-components, mini-program |

## Links

- npm: https://www.npmjs.com/package/we-design
- Repository: https://github.com/zhaotoday/we-design
- Homepage: https://github.com/zhaotoday/we-design#readme
- Issues: https://github.com/zhaotoday/we-design/issues
- npm.io page: https://npm.io/package/we-design

## Dependencies (8)

- [vuex](https://npm.io/package/vuex.md) ^3.1.2
- [axios](https://npm.io/package/axios.md) ^0.19.2
- [jt-rest](https://npm.io/package/jt-rest.md) 0.0.11
- [wx-bridge](https://npm.io/package/wx-bridge.md) 0.0.28
- [jt-helpers](https://npm.io/package/jt-helpers.md) 0.0.8
- [query-string](https://npm.io/package/query-string.md) ^6.12.1
- [jweixin-module](https://npm.io/package/jweixin-module.md) ^1.6.0
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.157 (latest) — 2020-09-11
- 0.0.156 — 2020-09-07
- 0.0.155 — 2020-09-07
- 0.0.154 — 2020-09-06
- 0.0.153 — 2020-09-06
- 0.0.152 — 2020-09-06
- 0.0.151 — 2020-09-06
- 0.0.150 — 2020-09-06
- 0.0.149 — 2020-09-03
- 0.0.148 — 2020-09-01
- 0.0.147 — 2020-08-29
- 0.0.146 — 2020-08-28
- 0.0.145 — 2020-08-28
- 0.0.143 — 2020-08-28
- 0.0.142 — 2020-08-27
- … 130 more at https://npm.io/package/we-design/versions

## README

## 关于

#### 简介

We Design 框架为微信小程序开发而生，帮助开发团队降低开发和维护成本。

#### 依赖框架

Uni App 框架。

#### 技术栈

Vue、Vuex、ES6、Sass、PostCSS 等。

#### 开发工具

HBuilderX IDE。

## 示例项目

https://github.com/zhaotoday/uni-app

## 使用

#### 命令

```bash
# 安装
$ npm install we-design --save

# 格式化代码
$ npm run format

# 校验代码
$ npm run lint
```

#### 开发与构建

请参考 HBuilderX 的使用。

#### 目录规范

```
|- assets               待编译的静态资源
|  |- images            图片（必须小于 40K）
|     |- components     组件图片
|        |- icon        icon 组件图片
|  |- styles            样式
|     |- global         全局样式
|     |- utils          Sass 工具
|        |- variables   Sass 变量
|
|- components           组件
|  |- icon              icon 组件
|     |- index.vue      icon 组件模板
|     |- script.js      icon 组件脚本
|     |- style.scss     icon 组件样式
|
|- mixins               混合
|
|- models               模型
|  |- public            前端模型
|     |- wx-users       微信用户模型
|  |- wx                微信端模型
|     |- wx-users       微信用户模型
|
|- pages                页面
|  |- home              主页
|     |- index.vue      主页模板
|     |- script.js      主页脚本
|     |- style.scss     主页样式
|
|- plugins              插件
|
|- static               无需编译的静态资源
|  |- images            图片
|
|- store                Vuex 状态管理
|  |- modules           Vuex 状态管理模块拆分
|     |- public         前端状态管理
|        |- wx-users    微信用户状态管理
|     |- wx             微信端状态管理
|        |- wx-users    微信用户状态管理
|
|- utils                工具
```

#### 定义 Sass 变量

可定义 CDN 地址/版本、本地图片地址、颜色值、组件相关 Sass 变量、自定义 Sass 变量等。

```scss
// CDN
$cdn: "http://localhost:88";

// CDN 版本号
$cdn-version: 0.1;

// 图片地址
$image-url: "~@/assets/images/components";

// 颜色
$colors: (
  c11: white,
  c12: black,
  ...
);

// button
$button-widths: 680px, 84px;
```

#### 覆盖 We Design 内置组件默认的图片资源

请参考 We Design 图片目录结构，将图片放置在 assets/images/components/ 目录下。
> 注：需要修改 Sass 变量 $image-url，指向对应目录：$image-url: "~@/assets/images/components";

#### 按需引用内置组件样式

assets/styles/global/index.scss

```scss
@import "../utils/index";
@import "~we-design/assets/styles/global/classes/colors";
@import "~we-design/assets/styles/global/classes/font-sizes";
@import "~we-design/assets/styles/global/classes/iconfont";
@import "~we-design/assets/styles/global/components/avatar";

// 引用其他内置组件样式

@import "~we-design/assets/styles/global/objects/grid";
@import "~we-design/assets/styles/global/objects/media";
@import "~we-design/assets/styles/global/reset/index";
@import "~we-design/assets/styles/global/utils/base";
@import "~we-design/assets/styles/global/utils/margin";
@import "~we-design/assets/styles/global/utils/padding";
```

#### 按需引用并注册内置组件

main.js

```js
import Vue from 'vue'
import App from '@/App'
import globalPlugin from '@/plugins/global'
import Checkbox from 'we-design/components/checkbox'

// 引用其他内置组件

Vue.config.productionTip = false

Vue.use(globalPlugin)

Vue.component('c-checkbox', Checkbox)

// 注册其他内置组件

const app = new Vue({
  mpType: 'app',
  ...App
})

app.$mount()
```

## 代码示例

#### 模型

models/wx/products.js

```js
import REST from "we-design/utils/rest";
import auth from "we-design/utils/auth";
import consts from "@/utils/consts";

export default class extends REST {
  constructor() {
    super();

    this.baseURL = consts.ApiUrl;
    this.headers = auth.getHeaders();
    this.path = "wx/products";
  }
}
```

#### 页面

pages/home/index.vue

```vue
<template>
  <div class="p-home">
    home
  </div>
</template>

<script src="./script.js"></script>

<style lang="scss" src="./style.scss"></style>
```

pages/home/script.js

```js
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Home extends Vue {}
```

pages/home/style.scss

```scss
@import '../../assets/styles/utils/index';

@include p(home) {
}
```

#### 组件

同页面。

#### Vuex 状态管理

store/modules/wx/products.js

```js
import createStore from "we-design/utils/create-store";
import Model from "../../../models/wx/products";

export default createStore({ Model });
```

## 贴士

#### 忽略目录

忽略目录，便于查找源码。选中目录 -> 右键 -> Mark Directory as -> Excluded； 

#### 代码格式化

快捷键：Ctrl + Alt + Shift + P；

#### 识别项目别名

- 复制 `alias.config.js` 文件到项目根目录下；
- WebStorm -> File -> Settings -> Languages & Frameworks -> JavaScript -> Webpack -> webpack configuration file 选择 alias.config.js；

#### 使用 iconfont

- 在 iconfont 相应图标项目，点击 `下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式`；
- 复制代码到 `/assets/styles/global/components/iconfont.scss`，`.c-iconfont` 去掉样式 `font-size: 16px;`，添加样式 `display: inline-block;`；

## 链接

- [Uni App 官网](https://uniapp.dcloud.io/)
- [HBuilderX 下载](https://www.dcloud.io/hbuilderx.html)

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