# test-project01-vue3

**Repository Path**: et_study_1/test-project01-vue3

## Basic Information

- **Project Name**: test-project01-vue3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-21
- **Last Updated**: 2023-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. 创建Vite + Vue + TS项目

<img src="imgs/1.创建Vue项目.png" style="zoom:80%; margin-left: 20px" />

## 2. 安装axios、element-plus、element-plus图标

- 执行npm安装命令

  ```bash
  D:\codes\dishes-vue3-ts> npm i axios element-plus @element-plus/icons-vue -S
  ```
  ![image-20231209160801833](imgs/2.安装axios、element-plus及其图标.png)

## 3. 在项目根目录中创建`.env.development`文件

1. **创建`.env.development`文件**

2. **编写文件内容**

   ```properties
   VITE_APP_BASE_API=http://localhost:8080
   ```

   **【注意：可选配置】**如果要获取它的提示，需要在`src/env.d.ts`中添加如下内容

   ```tsx
   interface ImportMetaEnv {
     readonly VITE_APP_BASE_API: string
     // 更多环境变量...
   }
   
   declare global {
     interface ImportMeta {
       readonly env: ImportMetaEnv
     }
   }
   ```

## 4. 修改`vite.config.ts`，新增`server配置项`

- 修改`vite.config.ts`文件

  ```js
  import {fileURLToPath, URL} from 'node:url'
  import {defineConfig} from 'vite'
  import vue from '@vitejs/plugin-vue'
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    /* 新增: 设置服务器端参数 */
    server: {
      hmr: true, /* 开启热加载 */
      host: 'localhost', /* 设置服务器地址名 */
      port: 8000, /* 设置端口号 */
      open: true, /* 自动打开浏览器 */
    }
  })
  ```

## 5. 配置element-plus

1. **配置Volar支持，如果您使用 Volar，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型。**

   **针对咱们的项目，修改`tsconfig.node.json`文件，增加下面注释中的配置**

   ```js
   {
     "extends": "@tsconfig/node18/tsconfig.json",
     "include": [
       "vite.config.*",
       "vitest.config.*",
       "cypress.config.*",
       "nightwatch.conf.*",
       "playwright.config.*"
     ],
     "compilerOptions": {
       "composite": true,
       "module": "ESNext",
       "moduleResolution": "Bundler",
       "types": [
         "node",
         "element-plus/global" // 增加这行配置
       ]
     }
   }
   ```

3. **修改`env.d.ts`：配置全局中文国际化，在`env.d.ts`最后增加下面一行**

   ```js
   declare module 'element-plus/dist/locale/zh-cn.mjs'
   ```

4. **修改main.ts：全局引入elment-plus、为其中文国际化和图标**

   ```js
   /* 导入element-plus组件和它的css样式 */
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   
   /* 导入中文国际化文件 */
   import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
   
   /* 为Vue安装ElementPlus, 并配置中文国际化 */
   app.use(ElementPlus, {
     locale: zhCn,
   })
   
   /* Element-Plus图标 */
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
   }
   ```


## 6. 在src下创建`util`目录，并在其中创建`request.ts`文件

1. **创建`src/util/request.ts`文件**

2. **编写内容**

   ```tsx
   import axios, {type AxiosInstance} from 'axios'
   
   const request: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_APP_BASE_API
   })
   
   export default request
   ```