Nuxt3-Admin - 引入Element-Plus 和登录页开发

要快速开发一个自己的后台系统，一个成熟并且组件丰富的UI库是必不可少的，Vue我推荐使用Element Plus 来作为自己系统的UI库。可以极大的提升自己的开发效率。

Nuxt Module

nuxt 有提供一个开发者变成自己的nuxt-module并上传给其他人使用。我们在Nuxt官网-Modules 很轻松的找到目前比较热门的modules.
Element-Plus 在搜索栏中搜索 Element

image.png

点击进去，按照文档提供的步骤一步一步操作就行了。

Features

自动导入Element组件和样式需求
自动导入Element 指令和样式需求
自动导入 element-plus/icons-vue
自动导入 ELMessage, ELNotification 和其他全局方法
自动注入 ID_INJECTION_KEY 到 Vue
自动注入 teleport 编辑到正确的页面

Installation 安装

assets/* 新建项目资源文件夹，格式如下

npm i element-plus @element-plus/nuxt -D

nuxt.config.ts 这里默认引入了dark的主题

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: {
    /** Options */
    icon: "ElIcon",
    importStyle: "scss",
    themes: ["dark"],
  },
})

使用

<template>
  <el-button @click="ElMessage('hello')">button</el-button>
  <ElButton :icon="ElIconEditPen" type="success">button</ElButton>
  <LazyElButton type="warning">lazy button</LazyElButton>
</template>

我们讲这段代码复制到我们的 pages/color-mode.vue, 顺便清空一下 app.vue 文件，注释掉 <NuxtWelcome />，试一下效果。

image.png

发现页面报错了，根据错误提示可以清晰的看到，主要是scss预编译样式的问题，原因是我们新项目目前还没有引入scss，nuxt项目兼容scss文件也非常简单，只需要安装sass和sass-loader 就好了，不需要配置任何文件。

npm i -D sass sass-loader

新建项目资源文件夹，推荐格式如下

📂assets
┗ 📂images
┗ 📂scss
  ┗ 📜main.scss
  ┗ 📜mixins.scss
  ┗ 📜variables.scss

导入全局main.scss

{
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/main.scss" as *;',
        },
      },
    },
  },
}

当然后续如果使用 tailwindcss的话，这边就很少会自己去定制scss环境变量了，主要是为了配置element-plus的多主题色调。现在让我们从新运行代码，刷新下页面。

image.png

很好，代码一切成功运行。

elementPlus Options 配置

正常情况下我们不需要去修改什么，更多配置详情可以查看 element-plus Options 官方文档。

开发一个登录页

pages/login.vue 新在项目pages目录下新建一个 login.vue 文件。

导入资源图片素材

这里从网上随便下载的一些图片，你们可以随便替换成你们自己的

image.png

login.vue

<!-- file: ~/pages/login.vue -->
<template>
  <div
    class="background flex items-center justify-center min-h-screen relative"
  >
    <div
      class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50"
    ></div>
    <div
      class="flex px-24 h-screen m-auto shadow-lg shadow-slate-500 backdrop-blur p-3 relative rounded-sm overflow-hidden border-sky-100"
    >
      <div
        class="flex p-5 px-10 bg-opacity-[.8] mb-5 absolute top-0 w-full left-0"
      >
        <div class="space-y-3">
          <img
            class="logo"
            src="https://element-plus.org/images/element-plus-logo.svg"
          />
          <NuxtLogo class="text-white"></NuxtLogo>
        </div>
        <div class="ml-auto text-3xl text-gray-300 font-bold">
          Nuxt-Admin-Template
        </div>
      </div>
      <section class="max-w-6xl m-auto w-full">
        <div
          class="flex backdrop-blur items-center rounded-sm overflow-hidden h-[350px]"
        >
          <section class="flex-1 h-full">
            <el-carousel class="h-full w-[500px]">
              <el-carousel-item>
                <div
                  class="bg-red-200 h-full bg-[url(@/assets/images/a1.avif)] bg-no-repeat bg-cover"
                ></div>
              </el-carousel-item>
              <el-carousel-item>
                <div
                  class="bg-red-200 h-full bg-[url(@/assets/images/a2.avif)] bg-no-repeat bg-cover"
                ></div>
              </el-carousel-item>
              <el-carousel-item>
                <div
                  class="bg-red-200 h-full bg-[url(@/assets/images/a3.avif)] bg-no-repeat bg-cover"
                ></div>
              </el-carousel-item>
            </el-carousel>
          </section>
          <section class="min-w-[350px] h-full">
            <div class="bg-black bg-opacity-50 p-3 h-full">
              <div
                class="text-slate-50 text-2xl font-baloo font-bold text-center"
              >
                Login to your Account
              </div>
              <div>
                <el-form
                  class="login-form mt-5"
                  :model="form"
                  label-width="0px"
                >
                  <el-form-item prop="username">
                    <el-input
                      class=""
                      v-model="form.username"
                      size="large"
                      placeholder="Username"
                      :prefix-icon="User"
                    />
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="form.password"
                      class="bg-none"
                      size="large"
                      :type="state.showPassword ? '' : 'password'"
                      placeholder="Password"
                      :prefix-icon="Lock"
                    >
                      <template #suffix>
                        <el-icon
                          class="cursor-pointer"
                          @click="state.showPassword = !state.showPassword"
                        >
                          <el-icon-view v-if="state.showPassword" />
                          <el-icon-Hide v-else />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <div class="text-right pb-5">
                    <el-link round class="mtext-right"
                      >Forget Password?</el-link
                    >
                  </div>
                  <el-form-item>
                    <div class="w-full text-center">
                      <el-button
                        class="w-[90%]"
                        round
                        type="primary"
                        size="large"
                        @click="signIn"
                        >Sign In</el-button
                      >
                    </div>
                    <div class="w-full text-center">
                      <el-button round type="" class="w-[90%]" size="large"
                        >Sign Up</el-button
                      >
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </section>
        </div>
      </section>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
const { vueApp } = useNuxtApp()

const state = reactive({
  showPassword: false,
  form: {
    username: 'admin',
    password: 'admin'
  }
})
const form = ref(state.form)
const signIn = async (e) => {}
</script>
  
<style lang="scss" scoped>
.background {
  background: url('@/assets/images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
</style>
<style lang="scss">
.el-carousel__container {
  height: 100%;
}
button {
  display: block;
  border: 1px solid;
  padding: 8px;
  margin: 8px;
  border-radius: 5px;
}

.login-form {
  .el-form-item .el-form-item__content .el-input .el-input__wrapper {
    background-color: initial;
  }
}
</style>

访问 http://localhost:3000/login

image.png

完成，这里我们以及建立了我们的登录页。接下来让我来实现登录功能

登录 Sign-in

登录功能模块包括了比较多知识点

登录接口

授权鉴权逻辑

接口请求，拦截器设置

以上功能涉及到模块有 Nuxt3的 useFetch 封装，middleware 拦截器开发， server api, 登录接口开发等等。

页面下方的小图标DevToll

image.png

这是Nuxt3 3.6.1 新版本提供的开发工具，在nuxt.config.ts 中配置开启和关闭，我们可以在上面清楚的观察到整个系统的所有功能模块，以及SEO配置等等，是一个挺强大的功能。

image.png

Nuxt3-Admin - 引入Element-Plus 和 登录页开发

Nuxt Module

Features

Installation 安装

使用

elementPlus Options 配置

开发一个登录页

导入资源图片素材

login.vue

登录 Sign-in

页面下方的小图标DevToll

推荐阅读更多精彩内容

Nuxt3-Admin - 引入Element-Plus 和登录页开发