vite 简介

vue 尤雨溪团队 开发的代替webpack 实现vue react 等框架打包的前端工程化打包工具，且自带vue react 脚手架模板。

1.通过vite 快速搭建vue react 脚手架项目

--template 后面紧跟的是vue react 的脚手架模板

模板列表： vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

2.创建vue+ts 项目

yarn create vite --template vue-ts

yarn

yarn dev 

3.vite 配置 @ 快速访问 src

vite +ts 项目配置 @别名快速访问 src 目录时，需要同时配置 vite.config.ts 和 tsconfig.json 才可以实现该功能。

• vite.config.ts 新增别名 配置

安装两个插件 获取项目的绝对路径

 yarn add path      #获取项目的绝对路径 的三方包

yarn add @types/node -D    #解决 引入path 三方包的报错

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
        //访问别名@ 
      "@":path.resolve(__dirname,'./src')
    }
  }
})

• tsconfig.json

tsconfig.json 中的 paths 配置项目中的别名配置

{
  "compilerOptions": {
		....,
     "baseUrl": ".",
    "paths":{
      "@/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}