当前位置：首页 > news >正文

从零搭建一个Vue3 + Typescript的脚手架——day3

news 来源：原创 2025/5/14 5:56:07

3.项目拓展配置

(1).配置Pinia

Pinia简介
Pinia 是 Vue.js 3 的状态管理库，它是一个轻量级、灵活、易于使用的状态管理库。Pinia 是 Vue.js 3 的官方状态管理库，它可以帮助开发者更好地管理应用的状态。Pinia 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。Pinia 是一个强大的工具，它可以处理 Vue.js 3 的许多方面，包括状态管理、路由、组件通信等。Pinia 是一个非常重要的工具，它可以帮助开发者更好地使用 Vue.js 3，并且可以提高应用的质量和性能。
安装配置

使用pnpm安装pinia

pnpm add pinia -D

在src目录下创建一个store文件夹，然后在store文件夹下创建一个index.ts文件，将基础内容写入：

import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

在src/main.ts文件中引入pinia

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

配置pinia持久化插件,使用pnpm安装pinia-plugin-persist

pnpm add pinia-plugin-persist -D

在src/store/index.ts文件中引入pinia-plugin-persist

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'const pinia = createPinia()
pinia.use(piniaPluginPersist)export default pinia

(2).配置vite路径别名

在vite.config.ts文件中添加配置

resolve: {alias: {'@': path.resolve(__dirname, 'src')}}

在tsconfig.json文件中添加配置

{"baseUrl": ".","paths": {"@/*": ["src/*"]}
},

注意：项目配置到这里之后，在vite.config.ts文件中导入path模块式会提示找不到模块或类型，这里是需要安装node模块的类型文件。

pnpm install --save-dev @types/node

在tsconfig.json文件中添加配置

{"compilerOptions": {"noImplicitAny": true,}
}

并且在package.json文件中添加配置

{"type": "module"
}

配置完之后我们会发现,在vite.config.ts文件中使用node中的__dirname会提示可能为未定义，因为我们使用vite是es模块，而__dirname是node模块中存在，因此这里我们使用import.meta.url来获取路径，手动生成__dirname

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path, { resolve } from "path"
import { fileURLToPath } from "url";const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);export default defineConfig({plugins: [vue(),],// 配置别名resolve: {alias: {"@": resolve(__dirname, "src"),},},
});

(3).封装一个Vue的插件注册功能

使用pnpm安装@element-plus/icons-vue

pnpm install @element-plus/icons-vue

在src下创建一个plugins文件夹，创建一个index.ts文件
然后再plugins中创建一个ElementPlusIcon文件夹，在文件夹中创建一个index.ts文件
写入组件注册代码

// plugins/ElementPlusIcon/index.ts
import { type App } from "vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"export function loadElementPlusIcon(app: App) {/** 注册所有 Element Plus Icon */for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
}

在plugins/index.ts文件中引入执行

import { type App } from "vue"
import { loadElementPlusIcon } from "./ElementPlusIcon"export function loadPlugins(app: App) {loadElementPlusIcon(app)
}

在main.ts文件中引入执行

import { loadPlugins } from "@/plugins"loadPlugins(app)

(4).配置自定义指令

在src下创建一个directives文件夹，创建一个index.ts文件

import type { App } from 'vue'
// 挂载自定义指令
export default function initDirective(app: App) {//  使用app.directive()方法注册自定义指令
}

在main.ts文件中引入执行

import { initDirective } from "@/directives"initDirective(app)

3.项目拓展配置

(1).配置Pinia

(2).配置vite路径别名

(3).封装一个Vue的插件注册功能

(4).配置自定义指令

相关文章：