Vite构建Vue3项目

1. 初始化

npm init vite

2. 输入项目名称

• vue3-ts

3. 选择vue

4. 选择typescript

5. 进入新建的项目

• cd vue3-ts

6. 安装依赖

• npm install

7. 运行

• npm run dev 或者 yarn dev

• 访问http://localhost:5173/

8. 安装路由

• yarn add vue-router -S

9. 安装element-plus

• yarn add element-plus -S

10. 安装自动导入组件插件

• yarn add unplugin-vue-components -D

11. 安装自动导入api插件

• yarn add unplugin-auto-import -D

12. 将./src变为@

• 下载@types/node依赖

npm i -D @types/node

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
    ],
    //extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

• tsconfig.json

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

13. 安装pinia

• yarn add pinia -S