从零搭建一个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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/962009.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32使用VScode开发

文章目录 Makefile形式创建项目新建stm项目下载stm32cubemx新建项目IED makefile保存到本地arm gcc是编译的工具链G++配置编译Cmake +vscode +MSYS2方式bilibiliMSYS2 统一环境配置mingw32-make -> makewindows环境变量Cmake CmakeListnijia 编译输出elfCMAKE_GENERATOR查询…

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.21 索引宗师:布尔索引的七重境界

1.21 索引宗师:布尔索引的七重境界 目录 #mermaid-svg-Iojpgw5hl0Ptb9Ti {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Iojpgw5hl0Ptb9Ti .error-icon{fill:#552222;}#mermaid-svg-Iojpgw5hl0Ptb9Ti .…

毕业设计--具有车流量检测功能的智能交通灯设计

摘要: 随着21世纪机动车保有量的持续增加,城市交通拥堵已成为一个日益严重的问题。传统的固定绿灯时长方案导致了大量的时间浪费和交通拥堵。为解决这一问题,本文设计了一款智能交通灯系统,利用车流量检测功能和先进的算法实现了…

课题推荐:基于matlab,适用于自适应粒子滤波的应用

自适应粒子滤波(Adaptive Particle Filter, APF)是一种用于状态估计的有效方法,特别适用于非线性和非高斯系统。 文章目录 应用场景MATLAB 代码示例代码说明结果扩展说明 以下是一个基于自适应粒子滤波的简单应用示例,模拟一个一维…

Redis(5,jedis和spring)

在前面的学习中,只是学习了各种redis的操作,都是在redis命令行客户端操作的,手动执行的,更多的时候就是使用redis的api(),进一步操作redis程序。 在java中实现的redis客户端有很多,…

基于聚类与相关性分析对马来西亚房价数据进行分析

碎碎念:由于最近太忙了,更新的比较慢,提前祝大家新春快乐,万事如意!本数据集的下载地址,读者可以自行下载。 1.项目背景 本项目旨在对马来西亚房地产市场进行初步的数据分析,探索各州的房产市…

(2025 年最新)MacOS Redis Desktop Manager中文版下载,附详细图文

MacOS Redis Desktop Manager中文版下载 大家好,今天给大家带来一款非常实用的 Redis 可视化工具——Redis Desktop Manager(简称 RDM)。相信很多开发者都用过 Redis 数据库,但如果你想要更高效、更方便地管理 Redis 数据&#x…

智慧园区管理系统为企业提供高效运作与风险控制的智能化解决方案

内容概要 快鲸智慧园区管理系统,作为一款备受欢迎的智能化管理解决方案,致力于为企业提供高效的运作效率与风险控制优化。具体来说,这套系统非常适用于工业园、产业园、物流园、写字楼及公寓等多种园区和商办场所。它通过数字化与智能化的手…

C++中常用的排序方法之——冒泡排序

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C中常用的排序方法之——冒泡排序的…

基础项目实战——3D赛车(c++)

目录 前言一、渲染引擎二、关闭事件三、梯形绘制四、轨道绘制五、边缘绘制六、草坪绘制七、前后移动八、左右移动​九、曲线轨道​十、课山坡轨道​十一、循环轨道​十二、背景展示​十三、引入速度​十四、物品绘制​十五、课数字路障​十六、分数展示​十七、重新生成​十八、…

深度学习指标可视化案例

TensorBoard 代码案例:from torch.utils.tensorboard import SummaryWriter import torch import torchvision from torchvision import datasets, transforms# 设置TensorBoard日志路径 writer SummaryWriter(runs/mnist)# 加载数据集 transform transforms.Comp…

AI时序预测: iTransformer算法代码深度解析

在之前的文章中,我对iTransformer的Paper进行了详细解析,具体文章如下: 文章链接:深度解析iTransformer:维度倒置与高效注意力机制的结合 今天,我将对iTransformer代码进行解析。回顾Paper,我…

Java内存模型 volatile 线程安全

目录 Java内存模型可见性例子和volatilevolatile如何保证可见性原子性与单例模式i非原子性 线程安全 Java内存模型 参考学习: Java Memory Model外文文档 CPU与内存,可参考:https://blog.csdn.net/qq_26437925/article/details/145303267 Java线程与内…

【FreeRTOS 教程 三】协程状态、优先级、实现及调度

目录 一、协程介绍: (1)协程的特点: (2)协程的优势: 二、协程状态: (1)协程状态说明: (2)协程状态图示:…

堆的存储(了解)

由于堆是⼀个完全⼆叉树,因此可以⽤⼀个数组来存储。(如果不清楚大家可以回顾⼆叉树的存储(上)c文章里的顺序存储) 结点下标为 i : 如果⽗存在,⽗下标为 i/2 ; 如果左孩⼦存在&…

谭浩强C语言程序设计(3) 7章

1、递归实现N的阶乘 c复制 #include <cstdio> // 包含标准输入输出库// 计算n的阶乘 int total 0; // 定义全局变量total用于存储阶乘结果// 递归函数计算阶乘 int fac(int a){// 如果输入的数小于0&#xff0c;输出错误信息if (a < 0){printf("%d < 0,err…

WPF基础 | WPF 常用控件实战:Button、TextBox 等的基础应用

WPF基础 | WPF 常用控件实战&#xff1a;Button、TextBox 等的基础应用 一、前言二、Button 控件基础2.1 Button 的基本定义与显示2.2 按钮样式设置2.3 按钮大小与布局 三、Button 的交互功能3.1 点击事件处理3.2 鼠标悬停与离开效果3.3 按钮禁用与启用 四、TextBox 控件基础4.…

MATLAB的数据类型和各类数据类型转化示例

一、MATLAB的数据类型 在MATLAB中 &#xff0c;数据类型是非常重要的概念&#xff0c;因为它们决定了如何存储和操作数据。MATLAB支持数值型、字符型、字符串型、逻辑型、结构体、单元数组、数组和矩阵等多种数据类型。MATLAB 是一种动态类型语言&#xff0c;这意味着变量的数…

模型I/O

文章目录 什么是模型I/O模型I/O功能之输出解析器输出解析器的功能输出解析器的使用Pydantic JSON输出解析器结构化输出解析器 什么是模型I/O 模型I/O在所有LLM应用中&#xff0c;核心元素无疑都是模型本身。与模型进行有效的交互是实现高效、灵活和可扩展应用的关键。LangChain…

docker安装Redis:docker离线安装Redis、docker在线安装Redis、Redis镜像下载、Redis配置、Redis命令

一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令 docker pull redis:7.4.0 2、离线包下载 两种方式&#xff1a; 方式一&#xff1a; -&#xff09;在一台能连外网的linux上安装docker执行第一步的命令下载镜像 -&#xff09;导出 # 导出镜像…