Nuxt3-Admin - 引入Element-Plus 和 登錄頁開發(fā)

要快速開發(fā)一個(gè)自己的后臺(tái)系統(tǒng)，一個(gè)成熟并且組件豐富的UI庫是必不可少的，Vue我推薦使用Element Plus 來作為自己系統(tǒng)的UI庫?？梢詷O大的提升自己的開發(fā)效率。

Nuxt Module

nuxt 有提供一個(gè)開發(fā)者變成自己的nuxt-module并上傳給其他人使用。我們?cè)?a target="_blank">Nuxt官網(wǎng)-Modules 很輕松的找到目前比較熱門的modules.
Element-Plus 在搜索欄中搜索 Element

image.png

點(diǎn)擊進(jìn)去，按照文檔提供的步驟一步一步操作就行了。

Features

  • 自動(dòng)導(dǎo)入Element組件和樣式需求
  • 自動(dòng)導(dǎo)入Element 指令和樣式需求
  • 自動(dòng)導(dǎo)入 element-plus/icons-vue
  • 自動(dòng)導(dǎo)入 ELMessage, ELNotification 和其他全局方法
  • 自動(dòng) 注入 ID_INJECTION_KEY 到 Vue
  • 自動(dòng)注入 teleport 編輯到正確的頁面

Installation 安裝

assets/* 新建項(xiàng)目資源文件夾，格式如下

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

nuxt.config.ts 這里默認(rèn)引入了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>

我們講這段代碼復(fù)制到我們的 pages/color-mode.vue, 順便清空一下 app.vue 文件，注釋掉 <NuxtWelcome />， 試一下效果。

image.png

發(fā)現(xiàn)頁面報(bào)錯(cuò)了，根據(jù)錯(cuò)誤提示可以清晰的看到，主要是scss預(yù)編譯樣式的問題，原因是我們新項(xiàng)目目前還沒有引入scss，nuxt項(xiàng)目兼容scss文件也非常簡單，只需要安裝sass和sass-loader 就好了，不需要配置任何文件。

npm i -D sass sass-loader

新建項(xiàng)目資源文件夾，推薦格式如下

??assets
┗ ??images
┗ ??scss
  ┗ ??main.scss
  ┗ ??mixins.scss
  ┗ ??variables.scss

導(dǎo)入全局main.scss

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

當(dāng)然后續(xù)如果使用 tailwindcss的話，這邊就很少會(huì)自己去定制scss環(huán)境變量了，主要是為了配置element-plus的多主題色調(diào)?，F(xiàn)在讓我們從新運(yùn)行代碼，刷新下頁面。


image.png

image.png

很好，代碼一切成功運(yùn)行。

elementPlus Options 配置

正常情況下我們不需要去修改什么，更多配置詳情可以查看 element-plus Options 官方文檔。

開發(fā)一個(gè)登錄頁

pages/login.vue 新在項(xiàng)目pages目錄下新建一個(gè) login.vue 文件。

導(dǎo)入資源圖片素材

這里從網(wǎng)上隨便下載的一些圖片，你們可以隨便替換成你們自己的


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

完成，這里我們以及建立了我們的登錄頁。接下來讓我來實(shí)現(xiàn)登錄功能

登錄 Sign-in

登錄功能模塊包括了比較多知識(shí)點(diǎn)

  • 登錄接口
  • 授權(quán)鑒權(quán)邏輯
  • 接口請(qǐng)求，攔截器設(shè)置

以上功能涉及到模塊有 Nuxt3的 useFetch 封裝，middleware 攔截器開發(fā)， server api, 登錄接口開發(fā)等等。

頁面下方的小圖標(biāo)DevToll

image.png

這是Nuxt3 3.6.1 新版本提供的開發(fā)工具，在nuxt.config.ts 中配置開啟和關(guān)閉，我們可以在上面清楚的觀察到整個(gè)系統(tǒng)的所有功能模塊，以及SEO配置等等，是一個(gè)挺強(qiáng)大的功能。

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容