目录

一、初始化

二、整合Element-Plus

三、路径别名

四、多环境配置

五、反向代理

六、其他依赖

---

一、初始化

npm init vite@latest vue3-element-admin --template vue-ts

 

二、整合Element-Plus

1.本地安装Element Plus和图标组件

npm install element-plus

npm install @element-plus/icons-vue

 2.全局注册组件

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
 
createApp(App)
    .use(ElementPlus)
    .mount('#app')

3.Element Plus全局组件类型声明

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

4.页面使用

<el-button type="primary">登录</el-button>

 

三、路径别名

1. 安装@types/node

npm install @types/node --save-dev

2. Vite配置

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

 3. TypeScript 编译配置

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

4.别名使用 

四、多环境配置

1. 新建环境文件

开发环境：.env.development
生产环境：.env.production
测试环境：.env.test

# .env.development
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE='vue3-element-admin'
VITE_APP_PORT=3000
VITE_APP_BASE_API='/dev-api'

# .env.production
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE='vue3-element-admin'
VITE_APP_PORT=3000
VITE_APP_BASE_API='/prod-api'

# .env.test
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE='vue3-element-admin'
VITE_APP_PORT=3000
VITE_APP_BASE_API='/test-api'

2.WebStorm插件 

3.环境变量智能提示 

在src下新建文件env.d.ts，内容如下： 

// src/ env.d.ts
// 环境变量类型声明
interface ImportMetaEnv {
    VITE_APP_TITLE: string,
    VITE_APP_PORT: string,
    VITE_APP_BASE_API: string
}
 
interface ImportMeta {
    readonly env: ImportMetaEnv
}

 

五、反向代理

修改vite.config.ts文件为如下：

// vite.config.ts
import {UserConfig, ConfigEnv, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
export default ({command, mode}: ConfigEnv): UserConfig => {
  // 获取 .env 环境配置文件
  const env = loadEnv(mode, process.cwd())
 
  return (
      {
        plugins: [
          vue()
        ],
        // 本地反向代理解决浏览器跨域限制
        server: {
          host: 'localhost',
          port: Number(env.VITE_APP_PORT),
          open: true, // 启动是否自动打开浏览器
          proxy: {
            [env.VITE_APP_BASE_API]: {
              target: 'http://vapi.youlai.tech', // 有来商城线上接口地址
              changeOrigin: true,
              rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
            }
          }
        },
        resolve: {
          alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
          }
        }
      }
  )
}

六、其他依赖

  建议都整上

npm install sass

npm install better-scroll -S

npm install echarts --save

npm install -D path-browserify

npm install -D path-to-regexp

npm install @wangeditor/editor-for-vue@next

npm install vue-router@next