Horizon UI

# 开发指南

# 扫码体验

可以通过移动端扫码体验

# 安装

# 准备环境

  • node-sass
  • sass-loader
yarn add node-sass sass-loader -D

# 通过npm安装

# 通过 npm 安装
npm install horizon-ui

# 通过 yarn 安装
yarn add horizon-ui

# 快速上手

# 完整引入

import Vue from 'vue'
import Horizon from 'horizon-ui'
import 'horizon-ui/static/theme.scss'
 
Vue.use(Horizon)

# 按需引入

到减小项目体积的目的。 首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "plugins": [
    ["component",
      {
        "libraryName": "horizon-ui",
        "styleLibraryName": "~node_modules/horizon-ui/static"
      },
      "horizon-ui"
    ]
  ]
}

那么，可以只引入需要的部分组件

import {
  Feed,
  FeedCard,
  Toast
  // ...
} from 'horizon-ui'

Vue.component(Feed.name, Feed)
Vue.component(FeedCard.name, FeedCard)
Vue.prototype.$toast = Toast

# 注意事项

组件库中用到的静态资源如下，请将这些文件引入到main.js中

Icon 图标 →