前言
對新的東西總是比較好奇，覺得知道多一點選擇就多一點，說不定哪天就用到了寒锚。昨天尤老師發(fā)布了一條微博，說圖森未來的小伙伴開源了一個Vue 3組件庫 Naive UI违孝，看上去很不錯刹前。于是我今天來體驗體驗！
創(chuàng)建項目
首先我們來創(chuàng)建一個vue3項目雌桑，我這里使用vite來創(chuàng)建：
$ npm init vite-app naiveui-demo
$ cd naiveui-demo
$ npm install
$ npm run dev
你也可以選擇其他你喜歡的方式
NaiveUI介紹
Naive UI由圖森未來開源的一個Vue3的組件庫（目前僅支持Vue3）喇喉，該項目具有以下幾個特點：
比較完整
有超過70個組件，特點是它們?nèi)伎梢?code>treeshaking主題可調(diào)
提供了一個使用Typescript構(gòu)建的先進的類型安全主題系統(tǒng)校坑。你只需要提供一個樣式覆蓋的對象拣技。不用less、sass耍目、css變量膏斤，也不用webpack的loaders使用 Typescript
Naive UI全量使用Typescript編寫，和你的Typescript項目無縫銜接邪驮。你不需要導(dǎo)入任何CSS就能讓組件正常工作不算太慢
select莫辨、tree、transfer、table沮榜、cascader都可以用虛擬列表
安裝
使用 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>
于是我們的按鈕就會出現(xiàn)在頁面中，如下
我們也可以全局引入振愿，但會失去 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中使用全部組件，這樣就不用一個一個導(dǎo)入了侣颂，為了方便測試
使用更多組件
我們上面配置了全局安裝档桃，那如何使用更多組件。使用過程也很簡單憔晒，即復(fù)制藻肄、粘貼、頁面展示拒担。
如下
展示效果
由于組件太多嘹屯，這里隨機截取幾張官網(wǎng)的圖來展示一下
更多詳情可以移步官網(wǎng)：https://www.naiveui.com/zh-CN/os-theme
總結(jié)
總體來說第一印象是不錯的，下次可以考慮用NaiveUI做個功能較全的采坑案例
