本篇文章主要目的是将vite+vue3+vue-router+ts+pinia+element-plus结合搭建一个基本项目框架，用于快速搭建项目，不会具体介绍每个库或者api调用方式，需要详细了解可以去官网

vite创建项目

编辑器如果使用的vscode 将vetur升级为volar 否则项目可以启动成功但是代码会有很多报错 :::success yarn create vite ::: 1.选择vue
2.选择vue-ts
3.安装依赖 yarn

  • 或者一步到位 :::success yarn create vite 项目名 —template vue-ts :::

    基础配置

    :::success 针对我们使用vuecli 脚手架创建项目的习惯，我会把注意点在下面列出来 :::
  1. 配置别名:我们习惯使用“@”代替src目录，在vite中直接使用“@”会报错，因为vite没有内置，需要我们手动添加，path 直接使用会提示找到不到模块，安装@types/node 即可 ```javascript // vite.config.ts import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ import { resolve } from ‘path’

// https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { ‘@’: resolve(__dirname, ‘src’) } } })

  1. 配置完别名我们就可以在代码中使用“@”替代src目录，当然也可以配置多个别名。这样配置完后有一个问题就是代码不报错了，但是也没有提示了，输入@后没有提示，只能手动输入路径，这样可太不智能了<br />![](https://cdn.nlark.com/yuque/0/2022/webp/26355361/1654704755314-cc5d25c6-08c1-428b-af1b-f80d65c25f56.webp#clientId=u98a2d579-a1e8-4&from=paste&id=ud1ef3084&originHeight=415&originWidth=586&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u928db056-19fd-4a19-8421-f1209f442f9&title=)<br />其实这个时候就是ts配置文件的问题，因为ts不知道“@”代表啥路径，所以在tsconfig.json中配置，<br />![](https://cdn.nlark.com/yuque/0/2022/webp/26355361/1654704771809-67456aac-0a5f-4f91-9012-ea2bc98165f7.webp#clientId=u98a2d579-a1e8-4&from=paste&id=ua2738bd3&originHeight=266&originWidth=300&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u891bf76e-b156-4ff9-8c15-c9d08f2c212&title=)<br />然后在输入“@”后就会智能提示路径了<br />![](https://cdn.nlark.com/yuque/0/2022/webp/26355361/1654704831032-a6385e68-1555-4e00-a0a0-e5ea8bc9308d.webp#clientId=u98a2d579-a1e8-4&from=paste&id=u2c214f3a&originHeight=400&originWidth=654&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ua8bc4bb3-5455-41ec-a4e7-70c74478fbd&title=)<br />介绍一个免引入的插件[unplugin-auto-import](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Funplugin-auto-import)<br />在vite.config.ts中配置
  2. ```javascript
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import AutoImport from 'unplugin-auto-import/vite'
  6. import { resolve } from 'path'
  8. // https://vitejs.dev/config/
  9. export default defineConfig({
  10.   plugins: [
  11.     vue(),
  12.     AutoImport({
  13.       imports: ['vue', 'vue-router'], // 需要自动引入api的库
  14.       dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' ,注意:这里配置之后会在启动之后多次编译，具体原因无法找到，可以选择注释掉，不影响使用
  15.     })
  16.   ],
  17.   resolve: {
  18.     alias: {
  19.       '@': resolve(__dirname, 'src')
  20.     }
  21.   }
  22. })

然后在代码中就可以随意使用vue3的api而不用每次都导入了

好了,现在可以愉快的进行开发了，我们搭建完后一定要运行build执行打包看一下，要不然等项目开发完了在打包如果出现问题，那就不好排查了，果然现在打包会有错误！！！
  1. yarn run v1.22.10
  2. $ vue-tsc --noEmit && vite build
  3. node_modules/@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  5. 26     readonly [ReactiveFlags.IS_READONLY]: boolean;
  6.                  ~~~~~~~~~~~~~
  8. node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  10. 1208     [BooleanFlags.shouldCast]?: boolean;
  11.           ~~~~~~~~~~~~
  13. node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1209:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  15. 1209     [BooleanFlags.shouldCastTrue]?: boolean;
  16.           ~~~~~~~~~~~~
  18. node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1400:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  20. 1400 export { ReactiveFlags }
  21.               ~~~~~~~~~~~~~
  23. node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1753:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  25. 1753 export { TrackOpTypes }
  26.               ~~~~~~~~~~~~
  28. node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1782:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
  30. 1782 export { TriggerOpTypes }
  31.               ~~~~~~~~~~~~~~
  34. Found 6 errors in 2 files.
  36. Errors  Files
  37.      1  node_modules/@vue/reactivity/dist/reactivity.d.ts:26
  38.      5  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208
  39. error Command failed with exit code 2.
  40. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

找到vite官网，官网给出了解释，所以我们把isolatedModules 设置为false，好了，可以打包了 —— 或者在build脚本里面注释掉vue-tsc —noEmit
vite+vue3+ts+pinia+element-plus搭建项目（一） - 图1

  • 打包后我们肯定要预览一下打包后的项目是否正常,结果是空白页面
  • 其实这是vite打包的路径问题，我们打开控制台查看，index.html可以正常请求，但是js和css请求404，看一下请求URL明显是路径问题

vite+vue3+ts+pinia+element-plus搭建项目（一） - 图2
vite+vue3+ts+pinia+element-plus搭建项目（一） - 图3
vite.config.ts配置base就可以解决问题了

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import AutoImport from 'unplugin-auto-import/vite'
  4. import { resolve } from 'path'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   base:'./',
  9.   plugins: [
  10.     vue(),
  11.     AutoImport({
  12.       imports: ['vue', 'vue-router'], // 需要自动引入api的库
  13.       dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
  14.     })
  15.   ],
  16.   resolve: {
  17.     alias: {
  18.       '@': resolve(__dirname, 'src')
  19.     }
  20.   }
  21. })

至此我们的项目完整搭建起来了!