Vue3后台管理系统（一）基础环境

古城微笑少年丶 2024-03-26 11:56 67阅读 0赞

**目录**

一、初始化

二、整合Element-Plus

三、路径别名

四、多环境配置

五、反向代理

六、其他依赖

--------------------

#### 一、初始化 ####

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

![92252c6d961d40b1b7bf0effaaf9668b.png][]![7671c53e3ead4953ad46e85192fa042b.png][]![8b053add74ca463e95a26f399c0ed901.png][] ![c06fab5dd0a3419bb62cb9f30cc7236e.png][]

#### 二、整合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>

![943b39227b634c53846aa5bf734063cd.png][]

#### 三、路径别名 ####

**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.别名使用**

![7bb0d41c38084fc18106260909530c79.png][]

#### 四、多环境配置 ####

**1. 新建环境文件**

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

![274abc9ab21c407e9020bf66748c3531.png][]

# .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插件**

![88c34f52ac5e4079bacac759f2f08372.png][]

**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
    }

![97a7611b84ec470ca7119937be2714a6.png][] ![31343641015e463e9641335bf3315610.png][]

#### 五、反向代理 ####

修改**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
              }
            }
          }
      )
    }

![5184ba8c3b8a4d02865765cd283c0dba.png][]

#### 六、其他依赖 ####

**建议都整上**

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

[92252c6d961d40b1b7bf0effaaf9668b.png]: https://img-blog.csdnimg.cn/92252c6d961d40b1b7bf0effaaf9668b.png
[7671c53e3ead4953ad46e85192fa042b.png]: https://img-blog.csdnimg.cn/7671c53e3ead4953ad46e85192fa042b.png
[8b053add74ca463e95a26f399c0ed901.png]: https://img-blog.csdnimg.cn/8b053add74ca463e95a26f399c0ed901.png
[c06fab5dd0a3419bb62cb9f30cc7236e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f717dc1e5d1341c1b186f9cada54851b.png
[943b39227b634c53846aa5bf734063cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a186bf74d20a4d498d1995c8e94ad125.png
[7bb0d41c38084fc18106260909530c79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e712f421bba74a3fade2a740234966cc.png
[274abc9ab21c407e9020bf66748c3531.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/50234aeadfbb45d1b131889eb3bd8b2f.png
[88c34f52ac5e4079bacac759f2f08372.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e467abe5eb6f40148bd173058332dab3.png
[97a7611b84ec470ca7119937be2714a6.png]: https://img-blog.csdnimg.cn/97a7611b84ec470ca7119937be2714a6.png
[31343641015e463e9641335bf3315610.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/42c9e7c803e64ef493c79d1f72abeff9.png
[5184ba8c3b8a4d02865765cd283c0dba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7610604eff6e41deada0b223a064095f.png