为妹子打造吸睛前端模板：Vue3+Unocss+NaiveUI+Monorepo强强联合

前端

2023-03-24 10:43:23

Vue3 + Unocss + NaiveUI + Monorepo：构建高效、美观的前端应用程序

简介

在当今快节奏的软件开发世界中，技术不断更新换代，采用现代化框架和工具至关重要。Vue3 、Unocss 、NaiveUI 和 Monorepo 的结合为构建高效、美观的前端应用程序提供了强大的解决方案。

Vue3 是最新一代 JavaScript 框架，以其响应式、组件化和出色的性能而闻名。它使开发人员能够轻松创建交互式、动态的用户界面。

Unocss 是一个轻量级的 CSS 引擎，可以将 CSS 类名转换为原子 CSS。这允许开发人员在模板中直接编写 CSS 样式，无需使用单独的 CSS 文件，从而提高了模块化和可重用性。

NaiveUI 是一个简约时尚的 UI 组件库，涵盖各种常见的组件，如按钮、表单、弹出框和导航栏。它提供了丰富的主题和样式，使构建美观大方的用户界面变得轻而易举。

Monorepo 是一种软件开发实践，将所有项目代码存储在一个单一的代码库中。这简化了代码共享和管理，从而提高了开发效率并降低了维护成本。

项目搭建

1. 项目初始化

首先，使用 Vue3 CLI 创建一个新项目，选择 Vue 3 + Vite 作为构建工具。然后，安装 Unocss 和 NaiveUI：

npm install --save-dev unocss
npm install --save naive-ui

2. 配置 Unocss

在项目根目录创建一个 unocss.config.js 文件，并添加以下配置：

// unocss.config.js
module.exports = {
  presets: [
    'uno',
    'icss',
    'attributify',
    'typography',
  ],
};

3. 配置 NaiveUI

在项目根目录创建一个 naive-ui.config.js 文件，并添加以下配置：

// naive-ui.config.js
module.exports = {
  theme: {
    // 设置默认主题
    primaryColor: '#409EFF',
  },
};

4. 创建页面

在 src/pages 目录下创建页面文件，例如 index.vue：

<!-- index.vue -->
<template>
  <div>
    <!-- 使用 NaiveUI 组件 -->
    <NButton>按钮</NButton>
    <NInput v-model="message">输入框</NInput>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { NButton, NInput } from 'naive-ui'
import { ref } from 'vue'

export default {
  components: {
    NButton,
    NInput,
  },
  setup() {
    const message = ref('')

    return {
      message
    }
  }
}
</script>

5. 使用 Unocss 样式

直接在模板中编写 CSS 样式：

<style>
/* 在模板中使用 Unocss 样式 */
.bg-blue {
  background-color: #409EFF;
}

.text-white {
  color: #ffffff;
}
</style>

6. 运行项目

运行 npm run dev 或 yarn dev 命令启动项目并预览用户界面。

示例

1. 页面布局

使用 NaiveUI 的 Layout 组件创建页面布局，包括头部、侧边栏和主体内容区域：

<template>
  <NLayout>
    <NLayout.Header>
      头部
    </NLayout.Header>
    <NLayout.Sidebar>
      侧边栏
    </NLayout.Sidebar>
    <NLayout.Content>
      主体内容
    </NLayout.Content>
  </NLayout>
</template>

2. 表单设计

使用 NaiveUI 的 Form 组件创建表单，包括输入框、选择框、日期选择器等组件：

<template>
  <NForm>
    <NFormItem label="姓名">
      <NInput v-model="name" />
    </NFormItem>
    <NFormItem label="年龄">
      <NSelect v-model="age">
        <NOption value="18">18</NOption>
        <NOption value="20">20</NOption>
        <NOption value="22">22</NOption>
      </NSelect>
    </NFormItem>
    <NFormItem label="出生日期">
      <NDatePicker v-model="birthdate" />
    </NFormItem>
  </NForm>
</template>

3. 数据展示

使用 NaiveUI 的 Table 组件展示数据，并提供排序、筛选和分页功能：

<template>
  <NTable :data="tableData" stripe>
    <NTableColumn prop="name" label="姓名" />
    <NTableColumn prop="age" label="年龄" />
    <NTableColumn prop="birthdate" label="出生日期" />
  </NTable>
</template>