要快速开发一个自己的后台系统，一个成熟并且组件丰富的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
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
