❤ tailwindcss、登录实现（Vue3系统篇四）
1、tailwindcss的使用
❤React体系13-tailwindcss的安装和使用 juejin.cn/post/736684…
vue之中使用
yarn add tailwindcss
npx tailwindcss init
yarn add postcss
yarn add autoprefixer
add -D tailwindcss postcss autoprefixer
配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
配置postcss.config.js
在项目根目录下创建或编辑 postcss.config.js 文件，并添加 Tailwind CSS 插件
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
// 其他 PostCSS 插件
]
}
踩坑一：
如果项目中单独引入了全局样式文件，那么上面创建的tailwind.css文件在引入时务必放在全局样式文件上面，否者Tailwindcss不会生效。如下：
踩坑二： vite.config.ts增加配置
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
},
},
})
3、登录页面的搭建
接下来我们简单搭建一下vite+vue3这部分的登录页面并实现功能
在我们的文件夹下面简单的搭建一下我们的路由NexusVue\src\router
import { createRouter, createWebHistory, RouteRecordRaw ,createWebHashHistory} from "vue-router"; // 导入路由
// 1. 配置路由 lintaibai--进来时候的初始页面
const routes = [
{
path: "/", // 默认路由 home页面
name: '/',
component: () => import('@/views/lintaibai.vue'),
},
{
path: "/login", // 默认路由 home页面
name: 'login',
component: () => import('@/views/admin/login.vue'),
},
];
// 2.返回一个 router 实列，为函数，配置 history 模式
const router = createRouter({
history: createWebHistory(), //createWebHashHistory
routes,
});
// 3.导出路由 去 main.ts 注册 router.ts
export default router
搭建一下我们的登录页面
// 处理表单提交的函数
const handleSubmit = async (event) => {
event.preventDefault();
// 在实际应用中，这里可以发送注册请求到服务器进行用户注册
// 这里简单地假设密码和确认密码相同才能注册成功
if (form.value.username === '' || form.value.password === '') {
return;
}else{
console.log(form.value, 'form.value');
try {
const res:any = await login(form.value);
console.log(res,'res');
if(res.code==200){
}else{
// message.error(res.message);
}
} catch (error) {
console.log('获取数据详情失败，请重试！',error);
} finally {
console.log('完！');
}
}
return;
};
这里我们检查一下，登录页面已经完成了！
4、使用js-cookie
使用本地的cookie来存储我们的token信息，一般我们会使用js-cookie
yarn add js-cookie
手写NexusVue\src\utils
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
5、Pinia的安装和使用
5-1 Pinia是什么（这部分后面会进行额外细致讲解）
Pinia 是一个为 Vue 3 设计的状态管理库，vue3建议使用pinia代替vuex进行状态管理。
理念上我觉得是对组合式API的扩展和衍生：
组合式API（Composable API）是一种设计和构建API的方式，思想就是让不同的API端的点和功能可以像积木一样组合，实现更复杂和定制化的功能。主要强调的其实是模块化、复用性、灵活性。
组合式API核心思想：
- 模块化设计：API被设计成独立的、可复用的模块，每个模块提供特定的功能或资源。低耦合度。
- 高内聚低耦合：每个API模块分管不同单一性功能，高度内聚。
- 灵活组合：开发者可以根据需求组合这些模块，从而构建出新的功能。这种组合可以是静态的（编写代码时确定）或者动态的（运行时确定）。
- 标准接口：定义一些标准化的接口和协议确保模块顺利组合。这些标准化接口使模块之间不需要了解对方的内部实现细节。
- 扩展性和可维护性：由于组合式API的模块化设计，添加新功能或修改现有功能风险更小。提高了系统的可扩展性和可维护性。
5-2安装
yarn add pinia
5-3 使用
创建一个 store，例如 counterStore
// src/stores/counterStore.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
在需要使用 store 的组件中导入并使用它
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<button @click="counterStore.increment()">Increment</button>
<button @click="counterStore.decrement()">Decrement</button>
</div>
</template>
<script>
import { useCounterStore } from '@/stores/counterStore';
export default {
setup() {
const counterStore = useCounterStore();
return { counterStore };
},
};
</script>
