小叶的前端笔记

Appearance

一. Element-Plus 集成 ​

1.1. 全局引入 ​

ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");
  • 如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
js
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

1.2. 按需引入 ​

  • 首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件
shell
npm install -D unplugin-vue-components unplugin-auto-import
  • vite
ts
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});
  • Webpack
js
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
};

1.3 针对 ElMessage 和 ElLoading 等组件引入样式 ​

  • 使用 vite-plugin-style-import npm install vite-plugin-style-import consola -D
    • 在 vite.config.ts 中配置
    js
    createStyleImportPlugin({
  resolves: [ElementPlusResolve()],
  libs: [
    {
      libraryName: "element-plus",
      esModule: true,
      resolveStyle: (name: string) => {
        return `element-plus/theme-chalk/${name}.css`;
      },
    },
  ],
});

二. 搭建登录页面 ​

2.1. 背景的搭建 ​

css
background: url("../../assets/img/login-bg.svg");

2.2. 登录界面 Panel ​

2.2.1. 整体界面的搭建 ​

js
<template>
  <div class="login">
    <login-panel />
  </div>
</template>

<script setup lang="ts">
import LoginPanel from './c-cpns/login-panel.vue'
</script>

2.2.2. tabs 搭建过程 ​

  • label 的插槽的使用
    • 根据 label 的位置通过 template 将内容插入
js
 <template #label>
    <div class="label">
      <el-icon><UserFilled /></el-icon>
      <span class="text">帐号登录</span>
    </div>
</template>

2.2.3. 账号登录 form ​

  • 绑定表单值 :model="account"
  • 定义 account 数据
js
const account =
  reactive <
  IAccount >
  {
    name: "",
    password: "",
  };
  • 绑定每个属性 v-model="account.name"

2.2.4. form 的校验规则 ​

  • 导入校验规则的类型 import type { FormRules, ElForm } from 'element-plus'
  • 使用：const accountRules: FormRules = {}
  • 通过 prop="name"标识，校验 name 规则

2.2.5. 点击立即登录 ​

  • 创建登录方法
js
function loginAction(参数) {
  account.name;
  account.password;
}
  • 暴露给其他组件使用 defineExpose({loginAction})
  • 父组件使用
    • const accountRef = ref<InstanceType<typeof 子组件名称>>()
      • 获取子组件的类型
    • 给子组件绑定 ref（ref="accountRef"）
js
function handleLoginBtnClick() {
  //1.获取子组件实例
  accountRef.value?.loginAction;
  //2.调用方法
}

2.3. 登录的操作 ​

2.3.1. form 通过验证 ​

  • 获取 ElForm 类型中的 validate()方法对表单进行验证 const formRef = ref<InstanceType<typeof ElForm>>()

2.3.2. 登录接口的调用 ​

  • 1.封装 service
  • 2.发送请求

2.3.3. 将登录操作 store 中 ​

js
const useLoginStore = defineStore("login", {
  state: () => ({
    id: "",
    token: localCache.getCache(LOGIN_TOKEN) ?? "",
    name: "",
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 1.账号登录, 获取token等信息
      const loginResult = await accountLoginRequest(account);
      this.id = loginResult.data.id;
      this.name = loginResult.data.name;
      this.token = loginResult.data.token;

      // 2.进行本地缓存
      localCache.setCache(LOGIN_TOKEN, this.token);
    },
  },
});

2.3.4. IAccount 类型的定义 ​

js
export interface IAccount {
  username: string
  password: string
}

2.4. token 缓存和 cache 封装 ​

js
enum CacheType {
  Local,
  Session
}

class Cache {
  storage: Storage

  constructor(type: CacheType) {
    this.storage = type === CacheType.Local ? localStorage : sessionStorage
  }

  setCache(key: string, value: any) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getCache(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }

  removeCache(key: string) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }
}

const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)

export { localCache, sessionCache }