typescript vite4 pinia vite

vite 子项目 热部署 通过nginx，和父项目端口号不同，导致热更新的websocket报错的解决方案 我的父项目端口号是8888 子项目端口号是 8013 这里报错的原因就是，热更新的websocket在8013的服务上，但是页面访问的是8888端口的websocket 所以自然会爆红 ......

解决方案 store/index.tsx import { configureStore } from '@reduxjs/toolkit'; import { useSelector, useDispatch } from 'react-redux' import type { TypedUseS ......

什么是Pinia 官方文档：https://pinia.vuejs.org/zh/introduction.html Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = re ......

vite ts 安装 js-cookie 库，vscode找不到类型说明（有波浪线），解决方案 先安装库 https://www.npmjs.com/package/js-cookie 再安装类型 https://www.npmjs.com/package/@types/js-cookie 问题 然 ......

前端项目性能优化和开发体验优化是无法避免的一个话题，在之前使用 webpack 做应用构建的时候，有许多手段和插件来做优化。当使用 vite 构建应用时也有许多插件来做优化，本文对 vite 的优化插件或方法做下汇总。 一、打包性能优化 1. html 处理 vite-plugin-html vit ......

TS基础 基本用法 TypeScript 代码最明显的特征，就是为 JavaScript 变量加上了类型声明。 let foo:string; 变量foo的后面使用冒号，声明了它的类型为string。 类型声明的写法，一律为在标识符后面添加“冒号 + 类型”。函数参数和返回值，也是这样来声明类型。 ......

什么是unocss？ unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 Unocss： Guide 用Vite安装和配置步骤：UnoCSS Vite Plugin 互动性文档：https://unocss.dev/interactive/（ ......

项目代码同步至码云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 1. 安装 npm i vue-router@4 2. 集成 1. 新建两页面进行示例 在src/view下 ......

原因是在引入Element-Plus的顺序在vue之前导致，重新调整下他们的顺序后，问题解决。 import App from './App.vue' import { setupI18n } from '/@/i18n' import { setupRouter } from '/@/router ......

前言 在使用 vue3 + vite 实际开发过程中的一些经验分享，涵盖 vite 构建优化配置项的实践，以及打包配置性能优化的实践 plugin 项目优化汇总 @vitejs/plugin-vue vite 支持 vue 开发 按需引入组件库 unplugin-vue-components unp ......

<script setup> import MapTimeLegend from "./components/MapTimeLegend" </script> [plugin:vite:import-analysis] Failed to resolve import "./components/M ......

为什么 JavaScript 可能仍然是你最好的选择。 原文链接 TypeScript 语言于 2012 年发布。刚发布时只是一个 JavaScript 超集。但几年后，它开始以过度炒作的速度爆炸式地增长。 它确实给 JavaScript 生态系统带来了一些有用的功能。然而，仅凭这些优点就足以让我们 ......

项目代码同步至码云 weiz-vue3-template 要求代码规范，主要是为了提高多人协同和代码维护效率，结合到此项目，具体工作就是为项目配置 eslint 和 prettier。 editorconfig 安装 EditorConfig for VS Code 插件，根目录下新建 .edito ......

遇到问题： 1. TypeError: Unknown file extension ".scss" for D:\workspace\ai_plat_front\node_modules\element-plus\theme-chalk\src\base.scss Serialized Error ......

//先下包 npm i postcss-px-to-viewportimport pxtovw from 'postcss-px-to-viewport' //配置参数 移动端适配 const usePxtovw = pxtovw({ viewportWidth: 375, viewportUnit ......

//npm i @types/node 先下包解决无法找到到类型声明文件的错误 //在vite.config.ts引入 import resolve from 'path' export default defineConfig({ resolve: { alias: { '@': resolve( ......

新建项目 npm create vite@latest 安装vue-router cd .\my-web\ npm install vue-router 在src -> components下新增（Home.vue） <template> <h1>我是主页</h1> </template> 在src ......

开发环境搭建 需要用到的环境如下： * Python 3.7.7 * Node.js v20.4.0 * NPM 9.7.2 * Yarn 1.22.21 * Git 2.40.1.windows.1 前端环境安装 1、下载安装Node.js,下载链接 https://nodejs.org/dist ......

Ampt lets developers rapidly build, deploy, and scale JavaScript/TypeScript apps in the cloud without complicated configs or managing infrastructure. ......

推荐 concurrently 点击查看代码 "dev": "concurrently \"nodemon --exec electron . \" \"vite\"", 成熟的脚手架 日常开发可以使用 electron-vite (opens new window)或 electron-vite- ......

要创建一个使用TypeScript语法的公共方法库项目，可以按照以下步骤使用Vite构建工具来设置项目： 安装Vite全局工具（如果已安装，请跳过此步骤）： npm install -g create-vite ``` 创建新项目： create-vite my-library --template ......

vite 代理的项目，一般看不到代理的目标地址 如图： 如果要查看代理的目标地址，本文提供两种方式 1，configure配置 如图，通过configure，我们可以拿到proxy代理实例，通过注册on事件，可以在回调函数里面拿到目标地址和请求的路径，从而设置header 2， bypass配置 其 ......

比如你的代码当中是使用 Ts 写的脚本，那么可能会有一些出现报错的情况，那么这个时候你可以使用：//@ts-ignore写上这个，你的代码就不会出现报错的情况了，比如下面的代码 App.VS.getView("MainLineView")?.test(); 即使你的类名 MainLineView 没 ......

Rollup 4 Vite 现在使用 Rollup 4，它也带来了一些重大的变化，特别是： 导入断言（assertions 属性）已被重命名为导入属性（attributes 属性）。 不再支持 Acorn 插件。 对于 Vite 插件，this.resolve 的 skipSelf 选项现在默认为 ......

proxy: { "/dev-api": { target: "http://172.18.247.123:9000", rewrite: (path) => path.replace(/^/dev-api/, ''), configure: (proxy, _options) => { proxy ......

Pinia 初体验 Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器，使用Composition Api进行重新设计的，也被视为下一代Vuex。 Pinia是一个Vue的状态管理库，允许跨组件、跨页面进行全局共享状态，也由于其设计的简洁性、和对typescript的良好支持，取代V ......

基本的使用已经记录完毕了，本篇记录 Pinia对store数据进行的订阅监听，更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe 1. 新建vue3项目，安装Pinia，配置Pinia，不再多说了，不会的可以看官网也可以看我前面 ......

前言 最近使用 vite 在写项目时，遇到vue3中给setup添加name的问题，本来是打算直接使用插件进行实现的，但是评论说是会有各种各样的问题，看了下vite插件介绍后，下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道，Vite 开发用的 ESB ......

准备 为了方便插件开发，这里就先做简单点，在项目根目录建立build文件夹，里面存放一些自定义的插件。 // # build/test.js export function testPlugin() { return { //插件名字 name: "vite-plugin-test", option ......

Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置。那接下来，就与你分析配置解析过程中 Vite 到底做了什么？即 Vite 是如何加载配置文件的。 流程梳理 先来梳理整体的流程，Vite 中的配置解析由 resolveConfig ......