一个案例明白(css变量，路由守卫,路由鉴权,pinia,自定义指令)

### 项目背景

在当今的前端开发领域，随着业务需求的多样化和复杂化，掌握一系列先进的前端技术和工具变得愈发重要。为了帮助开发者深入理解如何将 CSS 变量、路由守卫、路由鉴权、Pinia 状态管理以及自定义指令等技术结合应用于实际项目中，本文将通过一个示例案例进行详细的讲解和分析。

### 项目搭建

为了展示上述技术的实际应用，我们将构建一个简单的 Vue 3 应用，其中包含以下功能模块：

1. 用户登录与身份认证。

2. 页面路由的守卫机制。

3. 利用 CSS 变量实现主题切换。

4. 使用 Pinia 进行高效的状态管理。

5. 应用自定义指令以扩展功能。

#### 1. 创建 Vue 项目

首先，通过 Vue CLI 创建一个新的 Vue 3 项目：

```bash

vue create my-project

```

接着，切换到项目文件夹：

```bash

cd my-project

```

然后，安装 Pinia 状态管理库：

```bash

npm install pinia

```

#### 2. 初始化路由与 Pinia

在 `src` 目录下，创建两个文件夹 `router` 和 `store`，分别用于路由管理和状态管理。

```bash

mkdir src/router src/store

```

在 `router` 文件夹中创建 `index.js` 文件，设置路由配置：

```javascript

import { createRouter, createWebHistory } from 'vue-router';

// 定义示例路由

const routes = [

{

path: '/',

name: 'Home',

component: => import('@/views/Home.vue'),

meta: { requiresAuth: true }, // 需要身份认证

},

{

path: '/login',

name: 'Login',

component: => import('@/views/Login.vue'),

},

];

const router = createRouter({

history: createWebHistory,

routes,

});

// 配置路由守卫

router.beforeEach((to, from, next) => {

const isAuthenticated = localStorage.getItem('isAuthenticated'); // 假设通过 LocalStorage 来判断用户是否已认证

if (to.meta.requiresAuth && !isAuthenticated) {

next({ name: 'Login' });

} else {

next;

}

});

export default router;

```

接下来，在 `store` 文件夹中创建 `index.js` 文件以初始化 Pinia：

```javascript

import { createPinia } from 'pinia';

const pinia = createPinia;

export default pinia;

```

### 3. 创建登录页面与状态管理

在 `views` 文件夹中，我们将创建 `Login.vue` 和 `Home.vue` 页面。

**Login.vue**:

```vue

```

**Home.vue**:

```vue

```

### 4. 使用 CSS 变量实现主题切换

在 `src/assets` 文件夹中，创建 `variables.css` 文件，并定义 CSS 变量：

```css

:root {

--main-bg-color: #fff;

--main-text-color: #000;

}

body {

background-color: var(--main-bg-color);

color: var(--main-text-color);

}

```

然后，在 `App.vue` 中引入这个 CSS 文件：

```vue

```

### 5. 自定义指令的实现

接下来，我们将创建一个自定义指令，用于限制输入框中的字符长度。

在 `src` 目录下，创建 `directives` 文件夹，并在其中添加 `maxlength.js` 文件：

```javascript

export default {

beforeMount(el, binding) {

el.addEventListener('input', => {

if (el.value.length > binding.value) {

el.value = el.value.slice(0, binding.value);

}

});

},

};

```

在 `main.js` 中全局注册这条指令：

```javascript

import { createApp } from 'vue';

import App from './App.vue';

import router from './router/index';

import pinia from './store/index';

import maxLength from './directives/maxlength';

const app = createApp(App);

app.use(router);

app.use(pinia);

app.directive('maxlength', maxLength);

app.mount('#app');

```

在 `Login.vue` 页面中应用自定义指令：

```vue

```

### 结语

通过以上案例，我们有机地结合了 CSS 变量、路由守卫、身份认证、Pinia 状态管理以及自定义指令，构建了一个简易的 Vue 3 应用。这个项目不仅能够帮助开发者在实践中灵活运用这些技术和工具，还大幅提升了代码的可维护性与开发效率。希望这篇文章能为你的前端学习与开发之旅提供积极的帮助与启发！