2019-04-16-echart3使用技巧

15分钟搞定UI组件库官网制作:kissing_cat:

技术栈:sunny:

• vue-cli3
• vuepress

官网制作:kissing_heart:

使用 vuepress

• 在原有项目中加包

# 安装依赖
npm install -D vuepress
# 创建一个 docs 目录
mkdir docs

• 在package.json中进行脚本配置

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },

• 简单配置 在docs/.vuepress下新建文件config.js

module.exports = {
  base: '/demo-ui/',
  title: '项目名称',
  description: '项目描述',
  head: [['link', { rel: 'icon', href: '/favicon.png' }]],
  themeConfig: {
    // 导航栏logo
    logo: '/favicon.png',
    nav: [
      { text: '主页', link: '/' },
      { text: 'git', link: 'http://xxx.xxx.xx/demo-ui.git' },
    ],
    // 显示所有页面的标题链接
    displayAllHeaders: true,
    sidebar: [
      ['/', '介绍'],
      {
        title: '组件',
        collapsable: false,
        children: [
          {
            title: '基础组件',
            collapsable: false,
            children: [
              ['views/basic-components/searchBar', 'searchBar'],
              ['views/basic-components/topBar', 'topBar']
            ]
          },
          {
            title: '业务组件',
            collapsable: false,
            children: [
              ['views/business-components/weTree', 'weTree']
            ]
          }
        ]
      },
    ],
  },
};

• 使用vue组件（非必须，可跳过）

官网中提到，所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，可以在markdown中引用,我们可以在这里编写展示案例 ；（当然也可以直接使用下面的vuepress-plugin-demo-container直接在md中编写示例），vue文件中的代码高亮我用的是vue-highlightjs: 在/docs/.vuepress/components/下创建搜索框ww-search-bar.vue文件

• 使用vuepress-plugin-demo-container 插件，

可用于展示示例及代码，使用 ::: demo XXX ::: 包裹需要展示的示例。具体使用请查看官网介绍。

• 配置中文文案

在 docs -> .vuepress -> config.js 中添加如下配置：

locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      "lang": "zh-CN",
      "demo-block": {
        "hide-text": "隐藏代码",
        "show-text": "显示代码",
        "copy-text": "复制代码",
        "copy-success": "复制成功"
      }
    }
  }

• 引入 自定义组件库中的组件，便于md文档中直接使用，无需挨个引入组件：

在 docs -> .vuepress 目录下添加 enhanceApp.js文件，内容如下：

import demoUI from '../../packages'
export default ({ Vue }) => {
  Vue.use(demoUI)
}

• 自定义官网模板样式（非必须，可跳过）

在 docs -> .vuepress 目录下添加styles文件夹，再添加palette.styl 文件，内容如下：

// 用于重写默认颜色常量，或者设置新的 stylus 颜色常量
// 颜色
$accentColor = #1296db
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #16a0e2
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

• 编写文档

由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，对于SSR 不怎么友好的组件（比如包含了自定义指令），你可以将它们包裹在内置的 ClientOnly 组件中，而且注意因为是ssr,组件内部beforeCreate, created生命周期钩子函数访问不到浏览器 / DOM 的 API，只能在beforeMount和mounted中调用。

/docs/views/components/basic下创建README.md:

• 打包官网项目

npm run docs:build

[可参考] 完整的组件doc

### WwSearchBar 搜索输入框

通过鼠标或键盘输入字符

:::warning Input 为受控组件，它**总会显示 Vue 绑定值**。

通常情况下，应当处理 `input` 事件，并更新组件的绑定值（或使用`v-model`）。否则，输入框内显示的值将不会改变。

不支持 `v-model` 修饰符。
:::

### 基础用法

::: demo
​```html
<template>
  <div class="app">
    <WwSearchBar v-on:onClear="clearChatListSearchInput"
                        v-on:onChanged="onChanged($event)"
                        :defaultCenter="false"
                        :searchKeyword="searchKeyword"
                        type="white"
                        :inputWidth="220"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    onChanged(value) {
      this.searchKeyword = value
    },
    clearChatListSearchInput() {
      this.searchKeyword = ''
    },
  },
};
</script>
:::

### 灰色主题

::: demo 通过设置 ```type="gray"```
​```html
<template>
  <div class="app">
    <WwSearchBar v-on:onClear="clearChatListSearchInput"
                        v-on:onChanged="onChanged($event)"
                        :defaultCenter="false"
                        :searchKeyword="searchKeyword"
                        type="gray"
                        :inputWidth="220"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    onChanged(value) {
      this.searchKeyword = value
    },
    clearChatListSearchInput() {
      this.searchKeyword = ''
    },
  },
};
</script>
:::

### placeholder 自定义

::: demo 通过设置 ```placeholder``` 来修改提示信息
​```html
<template>
  <div class="app">
    <WwSearchBar v-on:onClear="clearChatListSearchInput"
                        v-on:onChanged="onChanged($event)"
                        :defaultCenter="false"
                        :searchKeyword="searchKeyword"
                        type="white"
                        placeHolder="自定义搜索提示"
                        :inputWidth="220"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    onChanged(value) {
      this.searchKeyword = value
    },
    clearChatListSearchInput() {
      this.searchKeyword = ''
    },
  },
};
</script>
:::

<ClientOnly>
### SearchBar Attributes
| 参数| 说明 | 类型 | 可选值 | 默认值 |
| :------ | ------ | ------ | ------ | ------ |
| defaultCenter | 提示文案是否居中 | boolean | false / true | false |
| searchKeyword | 输入关键字 | string | - | - |
| type | 搜索框类型 | string | white / gray | white |
| inputWidth | 输入字符宽度，根据字符长度计算 | string | -  | - |
| autoFocus | 是否自动获取焦点 | boolean | - | false |

</ClientOnly>

### SearchBar Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| onBegin | 在 SearchBar 获得焦点时触发 | (searchKeyword: String) |
| onEnd | 在 SearchBar 失去焦点时触发 | (searchKeyword: String) |
| onClear | 在点击由 `clearable` 属性生成的清空按钮时触发 | - |
| onChanged | 在 SearchBar 值改变时触发 | (searchKeyword: String) |

官网部署:sunny: - [手动部署]

• 申请devcloud服务器

• 登录devcloud服务器

• 安装并配置iFit

• 利用iFit 上传官网包至服务器

• 安装nginx

yum install nginx -y

• 修改nginx配置

静态资源路径修改

添加项目别名，避免项目内资源应用路径错误

• 重启nginx
• 域名申请