【AI Generated】NaiveUI实战

NaiveUI实战

引言
准备工作
NaiveUI 基础
- 3.1 安装与配置
- 3.2 快速开始
常用控件
- 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.1 自定义主题
- 5.2 国际化
- 5.3 动态加载组件
项目实战
- 6.1 项目初始化
- 6.2 设计组件
- 6.3 状态管理
- 6.4 API 集成
- 6.5 部署与优化
总结与展望

1. 引言

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

2. 准备工作

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

HTML/CSS 基础
JavaScript 基础
Vue 3 基础

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

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

安装 Node.js 和 npm：

访问 Node.js 官网下载并安装适用于你操作系统的版本。
安装完成后，打开终端（或命令提示符）并运行以下命令，确认安装成功：
```
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>

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

基本使用

<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 部署与优化

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

构建项目：

npm run build

部署到服务器：

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

性能优化：

使用 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 生态系统还会不断发展，期待你能持续关注和学习。

posted @ 2024-06-02 15:19 yuitoTDF 阅读(397) 评论(0) 编辑收藏举报

刷新页面返回顶部

yuitoTDF

不过是几副眼镜、几缕头发罢了...

【AI Generated】NaiveUI实战

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 部署与优化

Vue Router 懒加载

Vuex 模块化

Webpack 代码分割

使用 gzip 压缩

7. 总结与展望

公告