Vue3——Vite + element-plus +Vue3 项目搭建、"@"别名设置

1. 环境准备

• node 官网
• npm
  • 切换国内 npm 源镜像

  npm config set registry https://registry.npmmirror.com
  

  • 查看当前的镜像源

  npm config get registry
  

• vscode 插件扩展包
  • Vue Volar extension Pack

2. 项目初始化

本项目使用 vite 进行构建，vite 官方中文文档参考：cn.vitejs.dev/guide/

• 创建项目

  npm create vite@latest
  

  Need to install the following packages:
  create-vite@5.1.0
  Ok to proceed? (y) y
  √ Project name: ... vite-vue3-admin
  √ Select a framework: » Vue
  √ Select a variant: » TypeScript
  
  Scaffolding project in D:\Project\vite-vue3-admin...
  
  Done. Now run:
  
    cd vite-vue3-admin
    npm install
    npm run dev
  

• 安装依赖

  npm install
  

• 运行项目

  npm run dev
  

运行完毕后 访问项目: http://localhost:5173/

3. 集成 element-plus

官网地址: Eelement-Plus

• 安装 element-plus

  npm install element-plus --save
  

• 安装 Icon 图标

  npm install @element-plus/icons-vue
  

• 完整引入

  // main.ts
  import { createApp } from 'vue'
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  import App from './App.vue'
  
  const app = createApp(App)
  
  app.use(ElementPlus)
  app.mount('#app')
  

• Volar 支持

  // tsconfig.json
  {
    "compilerOptions": {
      // ...
      "types": ["element-plus/global"]
    }
  }
  

4. src 别名的配置

• 安装 types/node

  npm install --save @types/node
  

  // vite.config.ts
  import {defineConfig} from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path'
  export default defineConfig({
      plugins: [vue()],
      resolve: {
          alias: {
              "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
          }
      }
  })
  

• TypeScript 编译配置

  // tsconfig.json
  {
    "compilerOptions": {
      "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
      "paths": { //路径映射，相对于baseUrl
        "@/*": ["src/*"]
      }
    }
  }