vite+vue3+ts+pinia+element-plus搭建项目（一）

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

vite创建项目

编辑器如果使用的vscode 将vetur升级为volar 否则项目可以启动成功但是代码会有很多报错

yarn create vite

1.选择vue
2.选择vue-ts
3.安装依赖 yarn

image.png

执行 yarn dev 打开浏览器出现如下则说明项目启动成功

image.png

基础配置

针对我们使用vuecli 脚手架创建项目的习惯，我会把注意点在下面列出来

1. 配置别名:我们习惯使用“@”代替src目录，在vite中直接使用“@”会报错，因为vite没有内置，需要我们手动添加，path 直接使用会提示找到不到模块，安装@types/node 即可

// 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')
    }
  }
})

配置完别名我们就可以在代码中使用“@”替代src目录，当然也可以配置多个别名。这样配置完后有一个问题就是代码不报错了，但是也没有提示了，输入@后没有提示，只能手动输入路径，这样可太不智能了

image.png

其实这个时候就是ts配置文件的问题，因为ts不知道“@”代表啥路径，所以在tsconfig.json中配置，

image.png

然后在输入“@”后就会智能提示路径了

image.png

好了，现在可以愉快的进行vue3+ts开发了，但是我们在开发过程中会发现一个问题，如果要使用vue3的api
必须要引入，vue2则不用，那么如何解决这个问题呢？

当然是插件啦！unplugin-auto-import
在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'], // 需要自动引入api的库
      dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' ,注意:这里配置之后会在启动之后多次编译，具体原因无法找到，可以选择注释掉，不影响使用
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

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

好了,现在可以愉快的进行开发了，我们搭建完后一定要运行build执行打包看一下，要不然等项目开发完了在打包如果出现问题，那就不好排查了，果然现在打包会有错误！！！

yarn run v1.22.10
$ vue-tsc --noEmit && vite build
node_modules/@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

26     readonly [ReactiveFlags.IS_READONLY]: boolean;
                 ~~~~~~~~~~~~~

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.

1208     [BooleanFlags.shouldCast]?: boolean;
          ~~~~~~~~~~~~

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.

1209     [BooleanFlags.shouldCastTrue]?: boolean;
          ~~~~~~~~~~~~

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.

1400 export { ReactiveFlags }
              ~~~~~~~~~~~~~

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.

1753 export { TrackOpTypes }
              ~~~~~~~~~~~~

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.

1782 export { TriggerOpTypes }
              ~~~~~~~~~~~~~~


Found 6 errors in 2 files.

Errors  Files
     1  node_modules/@vue/reactivity/dist/reactivity.d.ts:26
     5  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这个就很烦！！！
找到vite官网，官网给出了解释，所以我们把isolatedModules 设置为false，好了，可以打包了 ---- 或者在build脚本里面注释掉vue-tsc --noEmit

image.png

打包后我们肯定要预览一下打包后的项目是否正常，我们打开index.html期待出现页面，结果是空白 ！！！是不是很郁闷

其实这是vite打包的路径问题，我们打开控制台查看，index.html可以正常请求，但是js和css请求404，看一下请求URL明显是路径问题

image.png

image.png

vite.config.ts配置base就可以解决问题了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base:'./',
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'], // 需要自动引入api的库
      dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

至此我们的项目完整搭建起来了，后续我会持续更新！！！