运行vue2源码,最适合的nodejs版本和yarn版本

Node.js 版本

  • Node.js 14.x:这是一个长期支持(LTS)版本,在许多 Vue 2 项目开发和部署中被广泛采用。它提供了良好的性能和稳定性,并且与大多数 Vue 2 生态系统的工具和依赖兼容。
perl 复制代码
# 使用 Node.js 14.x
nvm use 14

Yarn 版本

对于 Yarn,建议使用 Yarn 1.x(也称为 Yarn Classic)。Yarn 1.x 是一个成熟且广泛使用的包管理工具,在 Vue 2 项目开发中具有良好的兼容性和稳定性。

sql 复制代码
npm install -g yarn@1
yarn -v
yarn add typescript@latest --dev

忽略警告

如果更新依赖或者指定版本都不可行,且这个警告不会影响项目的正常运行,你可以选择忽略这个警告。不过,这只是一个临时的解决方案,建议你在合适的时机对依赖进行升级。

在运行项目时,可以使用 --no-fund--no-audit 参数来减少不必要的警告输出:

使用 npm

css 复制代码
npm install --no-fund --no-audit

使用 yarn

css 复制代码
yarn install --no-fund --no-audit

ts报错

swift 复制代码
Type '{ component: () => Promise<Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>>; }' is not assignable to type 'void | Promise<EsModule<Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>>> | { component: Promise<EsModule<Component<DefaultData<never>, DefaultMethods<...>, DefaultComputed, Record<...>>>>; loading?: VueConstructor<...> | ... 3 more ... | undefined;

解决方案:

typescript

typescript 复制代码
import { Component } from 'vue';

// 假设 EsModule 是一个包装组件的类型
type EsModule<T> = { default: T };

type AsyncComponent = () => {
  component: Promise<EsModule<Component>>;
  loading?: any;
  error?: any;
  delay?: number;
  timeout?: number;
};

const b: AsyncComponent = () => ({
  // 直接返回 Promise<EsModule<Component>>
  component: new Promise<EsModule<Component>>((res, rej) => {
    res({ default: { template: "" } });
  }),
  // 你可以根据需要添加 loading、error、delay 和 timeout 属性
});

解释

  • 定义了 EsModule 类型,用于包装组件。
  • 确保 component 属性直接返回 Promise<EsModule<Component>>,而不是返回 Promise 的函数。
  • res({ default: { template: "" } }) 保证了返回的 Promise 解析为一个具有 default 属性的对象,该属性包含组件定义。
相关推荐
无人生还1 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
柒@宝儿姐2 小时前
若依 B 端从浏览器访问升级为 Windows 安装包交付流程
前端·javascript·vue.js·windows
达子66617 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒17 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏21 小时前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜21 小时前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载
di24k24k1 天前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
执子念的飞鱼1 天前
Vue 3 文件预览落地:鉴权 Blob、Worker/WASM 与内网子路径部署
vue.js·webassembly
无人生还1 天前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js
其美杰布-富贵-李1 天前
Vue 3 模块导入教程:import、export 与文件组织
前端·javascript·vue.js