Vue3+Pinia+Vite+TS+viteTest

1、Vite 需要 Node.js 版本 18+，20+

2、Vite 官网：https://cn.vitejs.dev/guide/

3、初始化项目

(1) npm create vite@latest

image.png

(2) 自定义create-vue

image.png

(3)选项

image.png

4、初始化完有几个小问题

(1)找不到模块“vue”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?ts(2792)

image.png

修复方法：

image.png

"moduleResolution": "node",

(2)找不到模块“./App.vue”或其相应的类型声明。ts(2307)

image.png

修复方法：

image.png

找到env.d.ts添加：

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}

(3)vite+vue3+ts ，类型“ImportMeta”上不存在属性“env”。ts(2339)

image.png

修复方法：

image.png

interface ImportMetaEnv {
  readonly BASE_URL: string
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

5、Pinia官网：https://pinia.web3doc.top/introduction.html