如何构建一个 Vite + Vue3 + Typescript + pinia + VueRouter4 的项目

120 阅读1分钟

用Vite构建完项目后:

1、配置'@'的路径快捷方式

tsconfig.ts 文件

"paths": {
      "@/*":[
        "src/*"
      ]
    }

vite.config.ts 文件

"resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }

2、自动import

下载插件: yarn add unplugin-auto-import

Snipaste_2022-10-17_14-13-48.png 保存后会在根目录创建一个auto-imports.d.ts 的文件

然后在 tsconfig.js 中的include添加"./auto-imports.d.ts"

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","./auto-imports.d.ts"],

3、Vue-router 的配置

import { createRouter, createWebHashHistory } from 'vue-router'
const routes: any = [{ path: '/home', component: () => import('@/views/home/index.vue') }]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router