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

简介: 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

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

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

2.1 编辑 src/pages/login.vue 引入naive-ui 组件
<script setup>
import router from "@/router/index.js";
import { NButton } from "naive-ui";
 
let handleLogin = () => {
  router.push({ name: 'home' })
}
</script>
 
<template>
  <div class="login">
    <n-button type="primary" size="small" @click="handleLogin">登录</n-button>
  </div>
</template>
 
<style lang="scss" scoped></style>

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

<script setup>
import MessageApi from "@/components/MessageApi.vue";
import {
  NMessageProvider,
  NDialogProvider,
  NConfigProvider,
  zhCN,
  dateZhCN,
} from "naive-ui";
</script>
 
<template>
  <!-- 如果你想使用信息,你需要把调用其方法的组件放在 n-message-provider 内部并且使用 useMessage 去获取 API。 -->
  <n-message-provider>
    <!-- 将 message API 通过 message-api 组件注入 window.$msg,之后在其他 SFC 可以直接使用 window.$msg -->
    <message-api></message-api>
  </n-message-provider>
 
  <!-- 如果你想使用对话框,你需要把调用其方法的组件放在 n-dialog-provider 内部并且使用 useDialog 去获取 API。 -->
  <n-dialog-provider>
    <!-- 将 n-config-provider 的 locale 设为从 naive-ui 导入的 zhCN 来设定全局中文。 -->
    <!-- 将 n-config-provider 的 date-locale 设为从 naive-ui 导入的 dateZhCN 来设定全局日期中文。 -->
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
      <router-view></router-view>
    </n-config-provider>
  </n-dialog-provider>
</template>
 
<style scoped></style>

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

<script setup>
import { useMessage } from 'naive-ui'
 
window.$msg = useMessage();
</script>
 
<template>
  <div></div>
</template>

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

<script setup>
import router from "@/router/index.js";
import { NButton, useDialog } from "naive-ui";
 
let toPage = (name) => {
  router.push({ name });
};
 
let handleShowMsg = () => {
  window.$msg.success("success message");
};
 
const dialog = useDialog();
let handleShowDialog = () => {
  dialog.warning({
    title: "警告",
    content: "你确定?",
    positiveText: "确定",
    negativeText: "不确定",
    onPositiveClick: () => {
      window.$msg.success("确定");
    },
    onNegativeClick: () => {
      window.$msg.error("不确定");
    },
  });
};
</script>
 
<template>
  <div class="home">
    home
    <n-button @click="toPage('demo')" type="primary">goDemo</n-button>
    <n-button @click="toPage('login')" type="warning">goLogin</n-button>
    <n-button @click="handleShowMsg" type="info">show message</n-button>
    <n-button @click="handleShowDialog" type="error">show dialog</n-button>
  </div>
</template>
 
<style lang="scss" scoped></style>

综上

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


目录
相关文章
|
1月前
|
Android开发 算法 架构师
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
|
1月前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
9天前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
13天前
|
XML Android开发 数据格式
【Android UI】中间对齐UI组件
【Android UI】中间对齐UI组件
10 1
|
15天前
|
开发框架 JavaScript 前端开发
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
|
15天前
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
|
29天前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
1月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
38 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
24 0