Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用

前言

如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门Vue3.0 基础入门快速入门。

UI 组件请参考官网:Naive Ui 官网

为什么选择 naive ui 不继续用 element ui,因为尤大大推荐,可以尝试下,而且 naive ui 更贴近 vue3 的语法,当然易上手还是element ui 好一点。

github 开源库:Vue3-Vite-Pinia-Naive-Js

gitee   开源库:Vue3-Vite-Pinia-Naive-Js

1. 安装依赖

yarn add naive-ui -D
// or
npm install naive-ui -D

Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用_第1张图片

 2. 在 SFC (单文件组件) 中使用

直接引入(推荐),你可以直接导入组件并使用它。这种情况下,只有导入的组件才会被打包。

2.1 编辑 src/pages/login.vue 引入naive-ui 组件




Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用_第2张图片

 3. 编辑 src/App.vue 引入 naive-ui 组件





4. 新增 src/components/MessageApi.vue 全局注册 window.$msg 组件



5. 编辑 src/pages/home.vue 引入 naive-ui 组件





 Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用_第3张图片

综上

Naive UI 安装完成。下一章: Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理

你可能感兴趣的:(vue.js,前端,javascript)