首页 > 其他分享 >【AI Generated】NaiveUI实战

【AI Generated】NaiveUI实战

时间：2024-06-02 15:34:35浏览次数：24  
标签：task return NaiveUI AI default Generated tasks export import

NaiveUI实战

目录

  1. 引言
  2. 准备工作
  3. NaiveUI 基础
    • 3.1 安装与配置
    • 3.2 快速开始
  4. 常用控件
    • 4.1 Button 按钮
    • 4.2 Input 输入框
    • 4.3 Select 选择框
    • 4.4 Checkbox 复选框
    • 4.5 Radio 单选框
    • 4.6 Switch 开关
    • 4.7 DatePicker 日期选择器
    • 4.8 TimePicker 时间选择器
    • 4.9 Form 表单
    • 4.10 Table 表格
    • 4.11 Modal 模态框
    • 4.12 Notification 通知
    • 4.13 Message 消息
  5. 进阶使用
    • 5.1 自定义主题
    • 5.2 国际化
    • 5.3 动态加载组件
  6. 项目实战
    • 6.1 项目初始化
    • 6.2 设计组件
    • 6.3 状态管理
    • 6.4 API 集成
    • 6.5 部署与优化
  7. 总结与展望

1. 引言

NaiveUI 是一个 Vue 3 组件库，旨在提供一个简单、灵活且高效的 UI 解决方案。本书将带你从零开始学习 NaiveUI，逐步掌握其核心概念和高级特性。

2. 准备工作

在开始学习 NaiveUI 之前，你需要具备以下基础知识：

此外，你需要准备以下开发工具：

  • 一个现代浏览器（如 Chrome 或 Firefox）
  • 一个代码编辑器（如 VS Code 或 Sublime Text）
  • Node.js 和 npm（用于管理项目依赖）

安装 Node.js 和 npm：

  1. 访问 Node.js 官网 下载并安装适用于你操作系统的版本。
  2. 安装完成后，打开终端（或命令提示符）并运行以下命令，确认安装成功：
    node -v
npm -v

3. NaiveUI 基础

3.1 安装与配置

首先，我们需要安装 NaiveUI 以及 Vue 3。

npm install naive-ui

然后，在你的项目入口文件中引入 NaiveUI。

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)
app.mount('#app')

3.2 快速开始

在 App.vue 中，我们可以开始使用 NaiveUI 提供的组件。

<template>
  <n-button type="primary">按钮</n-button>
</template>

<script>
export default {
  name: 'App'
}
</script>

4. 常用控件

4.1 Button 按钮

按钮是最常见的 UI 控件之一，NaiveUI 提供了丰富的按钮样式和功能。

基本使用

<template>
  <n-button type="primary">主要按钮</n-button>
  <n-button type="default">默认按钮</n-button>
  <n-button type="success">成功按钮</n-button>
  <n-button type="warning">警告按钮</n-button>
  <n-button type="error">错误按钮</n-button>
</template>

禁用状态

<template>
  <n-button type="primary" disabled>禁用按钮</n-button>
</template>

加载状态

<template>
  <n-button type="primary" loading>加载中...</n-button>
</template>

图标按钮

<template>
  <n-button type="primary" icon="md-checkmark">图标按钮</n-button>
</template>

4.2 Input 输入框

输入框用于用户输入文本信息。

基本使用

<template>
  <n-input v-model="inputValue" placeholder="请输入内容"></n-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

禁用状态

<template>
  <n-input v-model="inputValue" placeholder="请输入内容" disabled></n-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

前置/后置图标

<template>
  <n-input v-model="inputValue" placeholder="请输入内容" prefix-icon="md-search"></n-input>
  <n-input v-model="inputValue" placeholder="请输入内容" suffix-icon="md-checkmark"></n-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

4.3 Select 选择框

选择框用于从多个选项中选择一个或多个。

基本使用

<template>
  <n-select v-model="selectedValue" :options="options"></n-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' }
      ]
    }
  }
}
</script>

多选

<template>
  <n-select v-model="selectedValues" :options="options" multiple></n-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' }
      ]
    }
  }
}
</script>

4.4 Checkbox 复选框

复选框用于在多个选项中选择一个或多个。

基本使用

<template>
  <n-checkbox v-model="checked">复选框</n-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

多选

<template>
  <n-checkbox-group v-model="checkedValues">
    <n-checkbox label="选项一"></n-checkbox>
    <n-checkbox label="选项二"></n-checkbox>
    <n-checkbox label="选项三"></n-checkbox>
  </n-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedValues: []
    }
  }
}
</script>

4.5 Radio 单选框

单选框用于在多个选项中选择一个。

基本使用

<template>
  <n-radio v-model="selectedValue" label="选项一">选项一</n-radio>
  <n-radio v-model="selectedValue" label="选项二">选项二</n-radio>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null
    }
  }
}
</script>

单选组

<template>
  <n-radio-group v-model="selectedValue">
    <n-radio label="选项一">选项一</n-radio>
    <n-radio label="选项二">选项二</n-radio>
    <n-radio label="选项三">选项三</n-radio>
  </n-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null
    }
  }
}
</script>

4.6 Switch 开关

开关用于切换两个状态。

基本使用

<template>
  <n-switch v-model="checked"></n-switch>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

4.7 DatePicker 日期选择器

日期选择器用于选择日期。

基本使用

<template>
  <n-date-picker v-model="selectedDate"></n-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  }
}
</script>

4.8 TimePicker 时间选择器

时间选择器用于选择时间。

基本使用

<template>
  <n-time-picker v-model="selectedTime"></n-time-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: null
    }
  }
}
</script>

4.9 Form 表单

表单用于收集用户输入的信息。

基本使用

<template>
  <n-form :model="form" :rules="rules" ref="formRef">
    <n-form-item label="用户名" prop="username">
      <n-input v-model="form.username"></n-input>
    </n-form-item>
    <n-form-item label="密码" prop="password">
      <n-input v-model="form.password" type="password"></n-input>
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="handleSubmit">提交</n-button>
    </n-form-item>
  </n-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('提交失败')
        }
      })
    }
  }
}
</script>

4.10 Table 表格

表格用于展示数据列表。

基本使用

<template>
  <n-table :columns="columns" :data="data"></n-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      data: [
        {
          name: '张三',
          age: 20,
          address: '北京'
        },
        {
          name: '李四',
          age: 25,
          address: '上海'
        },
        {
          name: '王五',
          age: 30,
          address: '广州'
        }
      ]
    }
  }
}
</script>

4.11 Modal 模态框

模态框用于展示重要信息或进行交互。

基本使用

<template>
  <n-button type="primary" @click="showModal = true">打开模态框</n-button>
  <n-modal v-model:show="showModal" title="模态框标题">
    <p>这是模态框的内容。</p>
  </n-modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

4.12 Notification 通知

通知用于向用户展示简短的信息。

基本使用

<template>
  <n-button type="primary" @click="showNotification">显示通知</n-button>
</template>

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

export default {
  setup() {
    const notification = useNotification()

    const showNotification = () => {
      notification.success({
        title: '成功',
        content: '这是一个成功的通知'
      })
    }

    return {
      showNotification
    }
  }
}
</script>

4.13 Message 消息

消息用于向用户展示简短的反馈信息。

基本使用

<template>
  <n-button type="primary" @click="showMessage">显示消息</n-button>
</template>

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

export default {
  setup() {
    const message = useMessage()

    const showMessage = () => {
      message.success('这是一个成功的消息')
    }

    return {
      showMessage
    }
  }
}
</script>

5. 进阶使用

5.1 自定义主题

NaiveUI 支持自定义主题，你可以根据项目需求定制主题。

基本使用

import { createApp } from 'vue'
import App from './App.vue'
import { create, NButton } from 'naive-ui'

const naive = create({
  components: [NButton],
  themeOverrides: {
    common: {
      primaryColor: '#ff0000',
      primaryColorHover: '#ff4d4d',
      primaryColorPressed: '#b30000'
    }
  }
})

const app = createApp(App)
app.use(naive)
app.mount('#app')

5.2 国际化

NaiveUI 支持国际化，你可以根据项目需求定制语言。

基本使用

import { createApp } from 'vue'
import App from './App.vue'
import { create, NButton, useLocale } from 'naive-ui'
import zhCN from 'naive-ui/es/locales/zh-CN'

const naive = create({
  components: [NButton],
  locale: zhCN
})

const app = createApp(App)
app.use(naive)
app.mount('#app')

5.3 动态加载组件

你可以按需加载 NaiveUI 组件，减少项目的初始加载时间。

基本使用

import { createApp } from 'vue'
import App from './App.vue'
import { create, NButton } from 'naive-ui'

const naive = create({
  components: [NButton]
})

const app = createApp(App)
app.use(naive)
app.mount('#app')

6. 项目实战

6.1 项目初始化

使用 Vue CLI 初始化一个新的 Vue 项目。

npm install -g @vue/cli
vue create my-project
cd my-project
npm install naive-ui
npm run serve

6.2 设计组件

根据项目需求设计和实现各个组件。假设我们要构建一个简单的任务管理应用。

创建 components/TaskItem.vue：

<template>
  <n-card>
    <n-checkbox v-model="task.completed">{{ task.title }}</n-checkbox>
  </n-card>
</template>

<script>
export default {
  props: ['task']
}
</script>

创建 components/TaskList.vue：

<template>
  <n-list>
    <task-item v-for="task in tasks" :key="task.id" :task="task"></task-item>
  </n-list>
</template>

<script>
import TaskItem from './TaskItem.vue'

export default {
  components: {
    TaskItem
  },
  data() {
    return {
      tasks: [
        { id: 1, title: '学习 Vue', completed: false },
        { id: 2, title: '学习 NaiveUI', completed: false },
        { id: 3, title: '完成项目', completed: false }
      ]
    }
  }
}
</script>

在 App.vue 中使用 TaskList 组件：

<template>
  <div id="app">
    <h1>任务管理</h1>
    <task-list></task-list>
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'

export default {
  components: {
    TaskList
  }
}
</script>

6.3 状态管理

使用 Vuex 管理项目的全局状态。

安装 Vuex：

npm install vuex

创建 store/index.js：

import { createStore } from 'vuex'

export default createStore({
  state: {
    tasks: [
      { id: 1, title: '学习 Vue', completed: false },
      { id: 2, title: '学习 NaiveUI', completed: false },
      { id: 3, title: '完成项目', completed: false }
    ]
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    toggleTask(state, taskId) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        task.completed = !task.completed
      }
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task)
    },
    toggleTask({ commit }, taskId) {
      commit('toggleTask', taskId)
    }
  },
  getters: {
    completedTasks: state => {
      return state.tasks.filter(task => task.completed)
    }
  }
})

在 main.js 中引入 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import naive from 'naive-ui'

const app = createApp(App)
app.use(store)
app.use(naive)
app.mount('#app')

6.4 API 集成

假设我们有一个简单的 API 来获取和添加任务。

创建 api/tasks.js：

import axios from 'axios'

const API_URL = 'http://example.com/api/tasks'

export default {
  getTasks() {
    return axios.get(API_URL)
  },
  addTask(task) {
    return axios.post(API_URL, task)
  },
  toggleTask(taskId) {
    return axios.patch(`${API_URL}/${taskId}/toggle`)
  }
}

在 Vuex 中使用 API：

import { createStore } from 'vuex'
import api from '@/api/tasks'

export default createStore({
  state: {
    tasks: []
  },
  mutations: {
    setTasks(state, tasks) {
      state.tasks = tasks
    },
    addTask(state, task) {
      state.tasks.push(task)
    },
    toggleTask(state, taskId) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        task.completed = !task.completed
      }
    }
  },
  actions: {
    fetchTasks({ commit }) {
      api.getTasks().then(response => {
        commit('setTasks', response.data)
      })
    },
    addTask({ commit }, task) {
      api.addTask(task).then(response => {
        commit('addTask', response.data)
      })
    },
    toggleTask({ commit }, taskId) {
      api.toggleTask(taskId).then(() => {
        commit('toggleTask', taskId)
      })
    }
  },
  getters: {
    completedTasks: state => {
      return state.tasks.filter(task => task.completed)
    }
  }
})

在组件中触发 API 请求：

<template>
  <div>
    <n-list>
      <task-item v-for="task in tasks" :key="task.id" :task="task" @toggle="toggleTask(task.id)"></task-item>
    </n-list>
    <n-input v-model="newTaskTitle" placeholder="添加新任务"></n-input>
    <n-button type="primary" @click="addTask">添加</n-button>
  </div>
</template>

<script>
import TaskItem from './TaskItem.vue'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    TaskItem
  },
  data() {
    return {
      newTaskTitle: ''
    }
  },
  computed: {
    ...mapState(['tasks'])
  },
  methods: {
    ...mapActions(['fetchTasks', 'addTask', 'toggleTask']),
    addTask() {
      const newTask = {
        title: this.newTaskTitle,
        completed: false
      }
      this.addTask(newTask)
      this.newTaskTitle = ''
    }
  },
  created() {
    this.fetchTasks()
  }
}
</script>

6.5 部署与优化

将项目部署到生产环境，并进行性能优化。

  1. 构建项目：
npm run build
  1. 部署到服务器：

将 dist 目录中的内容上传到你的服务器。

  1. 性能优化：
  • 使用 Vue Router 的懒加载功能按需加载组件。
  • 使用 Vuex 的模块化功能减少状态管理的复杂性。
  • 使用 Webpack 的代码分割功能减少初始加载时间。
  • 使用 gzip 压缩减少传输数据量。

Vue Router 懒加载

在 router/index.js 中配置路由时使用懒加载：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Vuex 模块化

将 Vuex 的状态管理拆分为多个模块：

创建 store/modules/tasks.js：

import api from '@/api/tasks'

const state = {
  tasks: []
}

const mutations = {
  setTasks(state, tasks) {
    state.tasks = tasks
  },
  addTask(state, task) {
    state.tasks.push(task)
  },
  toggleTask(state, taskId) {
    const task = state.tasks.find(t => t.id === taskId)
    if (task) {
      task.completed = !task.completed
    }
  }
}

const actions = {
  fetchTasks({ commit }) {
    api.getTasks().then(response => {
      commit('setTasks', response.data)
    })
  },
  addTask({ commit }, task) {
    api.addTask(task).then(response => {
      commit('addTask', response.data)
    })
  },
  toggleTask({ commit }, taskId) {
    api.toggleTask(taskId).then(() => {
      commit('toggleTask', taskId)
    })
  }
}

const getters = {
  completedTasks: state => {
    return state.tasks.filter(task => task.completed)
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

在 store/index.js 中引入模块：

import { createStore } from 'vuex'
import tasks from './modules/tasks'

export default createStore({
  modules: {
    tasks
  }
})

Webpack 代码分割

在 vue.config.js 中配置代码分割：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        maxSize: 70000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    }
  }
}

使用 gzip 压缩

使用 compression-webpack-plugin 插件进行 gzip 压缩：

安装插件：

npm install compression-webpack-plugin --save-dev

在 vue.config.js 中配置插件：

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

7. 总结与展望

通过本书的学习，你应该已经掌握了 NaiveUI 的基础知识和一些高级特性。希望你能将这些知识应用到实际项目中，不断实践和探索，成为一名优秀的前端开发者。未来，NaiveUI 生态系统还会不断发展，期待你能持续关注和学习。

标签：task,return,NaiveUI,AI,default,Generated,tasks,export,import
From： https://www.cnblogs.com/yuito/p/-/naiveui

相关文章

  • 【AI Generated】从零学习Vue.js
    从零学习Vue.js目录引言准备工作Vue.js基础3.1Vue实例3.2模板语法3.3数据绑定3.4计算属性和侦听器3.5Class与Style绑定3.6条件渲染3.7列表渲染3.8事件处理3.9表单输入绑定Vue.js组件4.1组件基础4.2组件注册4.3父子组件通信4.4插槽4.5......
  • AI 助力古诗 MV 音乐：火爆赛道，新手也能轻松掘金
    今天，给大家介绍一个流量超级火爆的赛道——用AI生成古诗MV音乐。古诗作为中华文化的瑰宝，一直以来都以其独特的韵味和深刻的内涵吸引着无数文学爱好者。而现在，通过AI技术，我们可以将古诗与音乐相结合，创造出全新的艺术形式。这种结合不仅能够让古诗焕发出新的生命力，也......
  • Daily Training & 推荐文章
    前言：放一起了。\(\texttt{DailyTraining}\)懒得写详细题解，有冒号及后面的文字的表示做了，只有成套的打算做的才会放进来，有些题是同系列的以前做过的，比较喜欢的题会用\(\texttt{*}\)标出，半颗（\(\degree\)）就是普通略好，一颗一般是有趣，两颗一般是有趣或者妙妙，三颗一般是妙妙或者牛......
  • [AIGC] 广度优先搜索（Breadth-First Search，BFS）详解
    广度优先搜索（Breadth-FirstSearch，简称BFS）是一种用于图或者树的搜索算法，它的特点是按照“广度”进行搜索，即在扩展搜索路线的时候，BFS会先考虑当前节点的所有邻近节点，也就是说，它逐层地进行搜索。文章目录基本原理实现方法应用场景总结基本原理广度优先搜索的基本......
  • LangChain 0.2 - 构建本地 RAG应用
    本文翻译整理自：BuildaLocalRAGApplicationhttps://python.langchain.com/v0.2/docs/tutorials/local_rag/文章目录一、项目说明二、文档加载三、模型1、LLaMA22、GPT4All3、llamafile四、链式使用五、问答六、检索问答一、项目说明PrivateGPT、llama.cpp、......
  • 【会议征稿，ACM出版】2024年第四届人工智能、自动化与高性能计算国际会议（AIAHPC 2024，7
    2024第四届人工智能、自动化与高性能计算国际会议(AIAHPC2024)将于2024年7月19-21日在中国·珠海召开。本次会议主要围绕“人工智能、自动化与高性能计算”的最新研究展开，旨在荟聚世界各地该领域的专家、学者、研究人员及相关从业人员，分享研究成果，探索热点问题，交流新的经......
  • 【会议征稿，中国算力大会分会】2024算法、高性能计算与人工智能国际学术会议（AHPCAI 202
    2024算法、高性能计算与人工智能国际学术会议（AHPCAI2024）定于2024年6月21-23日在中国郑州举行。会议主要围绕算法、高性能计算与人工智能等研究领域展开讨论。会议旨在为从事算法、高性能计算与人工智能研究的专家学者、工程技术人员、技术研发人员提供一个共享科研成果和......
  • AI积累-算法的作用和分工
    算法的作用我有很多外卖需求，我有很多店、用户、外卖员的坐标，如何科学分配给每一个外卖员合理的任务和路线，让整个外卖系统的用户等待时间较短，这个需求的大概设计思路是什么？主要用到传统算法还是AI算法？为了科学分配每一个外卖员合理的任务和路线，以减少整个外卖系统的用户等待时......
  • AIGC中国开发者大会：AI Agent中国落地发展现状及多模态结合具身智能的发展展望
    引言2024年5月25日，第三届AIGC中国开发者大会在昆仑巢成功举办。本次大会围绕“AIAgent的国内应用现状及多模态结合具身智能的发展展望”这一主题，邀请了多位知名企业家、投资人以及技术专家，共同探讨大模型在中国各行各业的应用现状及未来发展趋势。AIAgent国内应用现状1......
  • 游戏AI寻路——八叉树+A*寻路
    利用八叉树的空中寻路你有思考过在空中如何进行寻“路”吗？来想象一个的场景：飞机从空中基地出发，要避开许多空中建筑，最终到达目的地。这种情况下的寻路是没有路面的，寻路物体的移动方向也比较自由，这该怎么寻呢？如果我们只是在一个平面进行寻路，我们可以直接用A*寻路，铺好一个地面网......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99