Giest UI - Vue 是一个现代化的 Vue 组件库, 它是一个用于构建现代网站和应用程序的开源设计系统。它提供了数十个具备统一化风格的组件与基础样式支持, 也能帮助你轻易的通过组件的方式使用图标。通过本文你可以快速的搭建一个基于此组件库的前端项目。

注意:请确保你拥有最新版本的 NodeJS, 同时也需要准备 NodeJS 的包管理器 NPM 或是 Yarn

为了轻易的和任何 Vue 项目接轨,我们使用 Vue 官方的脚手架 @vue/cli 创建通用项目。即便你的项目并非官方脚手架创建,也能以此通用项目作为参考,非常简单的使用 Geist UI

创建 Vue 项目

默认场景,你需要先安装 Vue 脚手架 (如果是自行编写 Bundle,可以跳过此节):

npm install -g @vue/cli

安装 @vue/cli 到全局

随后,我们可以使用命令生成基础的 Vue 项目:

vue create hello-world

选择默认选项即可完成项目的创建。事实上,这些项目打包与编译方式都不会影响我们使用 Geist UI,对于富有经验的开发者来说,可以自行定制。如果你在这一步遇到了问题,可以参见 官方文档 调试。

选择 默认 即可创建项目

安装 Geist UI

现在,我们可以运行命令安装 @geist-ui/vue:

npm i @geist-ui/vue

打开项目的入口文件: /src/main.js,并在其中引入组件包:

import Vue from 'vue'
import GeistUI from '@geist-ui/vue'
import App from './App.vue'
import '@geist-ui/vue/dist/geist-ui.css'

Vue.config.productionTip = false
Vue.use(GeistUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

别忘了在项目中添加样式文件: geist-ui.css

运行 npm serve 试试,项目可以正常运行,你现在已经在使用 Geist UI 了。看起来没有什么变化?别担心,下面我们写一些内容就可以看到了。

至此为止,你的项目代码应该和 示例工程 一样,如果有问题可以参考它修正。

第一个页面

打开 /src/components/HelloWorld.vue 文件,将模板替换为我们自己的内容。这包含了一句话与两个按钮:

<template>
  <div class="zi-layout">
    <zi-card style="width: 400px">
      <p>我的第一个 Geist UI 应用,看起来不错</p>
      <zi-button>按钮 1</zi-button>
      <zi-spacer />
      <zi-button type="success">按钮 2</zi-button>
    </zi-card>
  </div>
</template>

这里的以 zi- 起始的标签就是 Geist UI 提供的组件。是的,我们引入一次后可以在项目的任何文件内随意使用它们,这些组件的接口简洁、易于使用,同时也很酷,不是吗?

想要了解更多的组件,可以看看 所有的组件文档

你可以在这里参考至此为止 示例工程 的代码。

使用图标

我们准备了非常多的高质量图标可供使用,它们都是一个 Vue 组件,这意味着你从来不需要关心如何引用、添加、维护的问题,也没有任何的学习成本,只需要像往常一样使用组件即可。

图标由额外的库提供支持,运行命令安装 vue-icons:

npm i @geist-ui/vue-icons

随后你就可以在任何组件内使用这些 图标组件:

<script>
import coffee from '@geist-ui/vue-icons/packages/coffee'

export default {
  name: 'my-example',
  components: { coffee },
}
</script>

<template><coffee/></template>

觉得这里有些难以理解?没有关系,我们并不急着使用图标,你完全可以先熟悉 Geist UI。若是你对此感兴趣想要了解更多的图标,不妨看看我们所准备的 所有的图标文档

仅在 HTML 中使用

有些时候仅仅只需要单个 .html 文件就可以完成所有事情,这样我们就不必构建一个大而全的项目,幸运的是,即便是在单个 HTML 文件中,我们也能轻松的使用 Geist UI

注意:仅在 .html 文件中使用组件库意味着你必须还要在页面中引入 vue.js

我们在 这里 准备完整的 UMD 示例,你也可以按照这些代码创建一个极简的页面。

只使用样式

极少数情况下,你的项目已自制或是不需要任何组件,只想要单独的样式 (.css) 文件,不必担心,你不用引入和组件库相关的样式,我们为你准备了一份单独开发的纯 .css 样式。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@geist-ui/style@latest/dist/style.css" />

CDN 上直接使用样式文件

你可以在 Geist Style 项目浏览。这份独立的样式文件实现了部分纯 .css 组件的同时保持了极小的体积,大约只有 11kb

问题和建议

Geist UI 是一个 公益性的开源项目,我们没有借助它盈利。但不用担心,项目至今为止已经开发且维护了超过两年,并且会持续地维护,你有任何的问题、想法,都可以在 这里 留言,我们很高兴看到每个新想法,即使你是一个刚刚入门的开发者,也可以帮助我们做的更好。