阅读 2543

试试图森未来开源的一个Vue3组件库-NaiveUI (上)| 尝鲜记

这是我参与更文挑战的第 7 天,活动详情查看: 更文挑战

前言

对新的东西总是比较好奇,觉得知道多一点选择就多一点,说不定哪天就用到了。昨天尤老师发布了一条微博,说图森未来的小伙伴开源了一个Vue 3组件库 Naive UI,看上去很不错。于是我今天来体验体验!

1.png

创建项目

首先我们来创建一个vue3项目,我这里使用vite来创建:

$ npm init vite-app naiveui-demo
$ cd naiveui-demo
$ npm install
$ npm run dev
复制代码

你也可以选择其他你喜欢的方式

NaiveUI介绍

Naive UI由图森未来开源的一个Vue3的组件库(目前仅支持Vue3),该项目具有以下几个特点:

  • 比较完整

有超过 70 个组件,特点是它们全都可以 treeshaking

  • 主题可调

提供了一个使用 Typescript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象。不用 lesssasscss 变量,也不用 webpackloaders

  • 使用 Typescript

Naive UI 全量使用Typescript编写,和你的 Typescript 项目无缝衔接。你不需要导入任何 CSS 就能让组件正常工作

  • 不算太慢

selecttreetransfertablecascader 都可以用虚拟列表

安装

使用 npm 安装。

npm i -D naive-ui
复制代码

使用方式

我们先在项目的src\components目录下新建一个组件:Naiveui.vue

接着,我们可以选择直接引入或全局安装。先使用第一种方式直接引入,也是推荐的一种方式

//src\components\Naiveui.vue
<template>
  <n-button>naive-ui</n-button>
</template>

<script>
  import { NButton } from 'naive-ui'

  export default {
    components: {
      NButton
    }
  }
</script>
复制代码

然后将我们的组件引入App.vue中即可


//src\App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <Naiveui />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Naiveui from './components/Naiveui.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Naiveui
  }
}
</script>
复制代码

于是我们的按钮就会出现在页面中,如下

动画1.gif

我们也可以全局引入,但会失去 tree-shaking 的能力,打包有冗余代码。

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)
app.mount('#app')
复制代码

安装后,你可以在SFC中使用全部组件,这样就不用一个一个导入了,为了方便测试

使用更多组件

我们上面配置了全局安装,那如何使用更多组件。使用过程也很简单,即复制、粘贴、页面展示。 如下

动画2.gif

展示效果

由于组件太多,这里随机截取几张官网的图来展示一下

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

更多详情可以移步官网:www.naiveui.com/zh-CN/os-th…

总结

总体来说第一印象是不错的,下次可以考虑用NaiveUI做个功能较全的采坑案例

文章分类
前端
文章标签