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

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)