vue自带打包工具（vite打包工具）

vue 尤雨溪团队 开发的代替webpack 实现vue react 等框架打包的前端工程化打包工具，且自带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 vue2.创建vue ts 项目

yarn create vite --template vue-tsyarn

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') } } }) Vite 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" }] },