vite搭建ts+vue3开发框架

        因为一直从事react栈的前端框架，最近找工作发现兰州大部分公司都用vue，所以自己试着用vite搭建基于vue3的开发框架，特此记录。

        官方文档

        Vite 官方中文文档 (vitejs.dev)

        Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

        介绍 | Vue Router (vuejs.org)

关键步骤

• 安装vite

npm install vite --global

• 创建项目(不同项目模板不同，请参考官方文档)

npm create vite@latest my-vue-app -- --template vue-ts

• 支持路由

npm install vue-router@4

•         增加routes.ts

import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'


export const routes = [
    { path: '/', component: HelloWorld },
    { path: '/test', component: HelloWorld2 },
]

•         修改main.ts

import { createApp } from 'vue'
import * as VueRouter from "vue-router"
import { routes } from "./routes"
import './style.css'
import App from './App.vue'
const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes,
})
const app = createApp(App)
app.use(router)
app.mount('#app')

•         修改app.vue(一定要添加 <router-view />)

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
  <router-view />
</template>

安装TypeScript Vue Plugin (Volar) 插件解决路由路径爆红的问题，不要安装vetur插件，代码格式化工具使用Prettier

异步加载组件

  { path: "/table", component: ()=> import("./components/Table.vue")},//异步加载组件

支持绝对路径

ts.config添加如下配置，支持import HelloWorld from "@/components/HelloWorld.vue";导入

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

ts.config.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

添加.hintrc文件

{
  "extends": [
    "development"
  ],
  "hints": {
    "typescript-config/consistent-casing": "off",
    "typescript-config/strict": "off"
  }
}