详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

1、基本的vue3项目框架搭建

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)-CSDN博客

 

2、配置@符号为项目根目录

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

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',
  server: {             
    host: '0.0.0.0',    
    // port: 8080,      
    open: true
  },
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

3、配置tsconfig.json，解决vue-router 4.x导入RouteRecordRaw报错的问题

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "strict": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["ESNext", "DOM"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

 4、vue3基本模块

Pinia：状态管理库

ElementPlus：UI 组件库
　　　　基本用法：   https://blog.csdn.net/baobao95/article/details/137716291 
       w3cschool教程：    https://www.w3cschool.cn/vue_elementplus/ElementPlus_Layout.html

Vue Router：Vue.js 官方的路由管理器

Axios：一个基于 Promise 的 HTTP 客户端

VeeValidate：功能强大的表单验证库

Vue Test Utils：Vue.js 官方的测试工具库，用于编写和运行 Vue 组件的单元测试

Vue I18n：Vue.js 官方的国际化插件，用于实现多语言支持

Vue Transition Group：Vue.js 内置的组件，用于实现过渡动画效果