• vue3
• ts
• vite
• pinia
• axios
• vue-router
• vant

1.vite init

npm init vite

2.安装依赖

把上面的依赖都安装一下

安装vant的时候选择按需引入

npm i unplugin-vue-components -D

vite.config.ts

plugins: [ vue(), Components({ resolvers: [VantResolver()] }) ],

3.配置多环境

新建几个.env文件根据需要来。我是配置了.env.development .env.production .env.stageing

然后把package.json里面对应的命令更改一下

   "dev": "vite --mode development",

   "build": "vue-tsc && vite build --mode production",

   "stage": "vue-tsc --noEmit && vite build --mode staging",

4.配置别名

'@': path.resolve(__dirname, 'src')

这里多说一句，我配置之后一直报错，后台需要在tsconfig.json里添加

    // compilerOptions
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }

5.配置路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: () => import('@/views/login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home.vue')
  },
  {
    path: '/mine',
    name: 'Mine',
    component: () => import('@/views/mine.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

页面自己随便写，另外说一句，配置一个vscode的代码片段吧，挺方便的