创建一个Vue项目

创建一个工程化的Vue项目

npm init vue@latest

进入项目目录，执行命令安装当前项目的依赖

npm instal

创建vue项目时的选项

1. TypeScript：这是一个由微软开发的开源编程语言，它是JavaScript的超集，添加了可选的静态类型和基于类的面向对象编程。它的优势在于能够在编译时期发现潜在的错误，并且提供更丰富的工具支持。

2. JSX Support：JSX是JavaScript XML的简称，这是一种在JavaScript中编写类似HTML的语法扩展。它允许将HTML结构和组件直接嵌入到JavaScript代码中，这在React等库中非常常见。

3. Router：在单页应用（SPA）中，路由（Router）管理着不同页面之间的导航和视图切换。Vue Router是Vue.js官方的路由管理器，它提供了嵌套的路由视图和模块化的、基于组件的路由配置。

4. Pinia：这是Vue的官方状态管理库，用于在Vue应用中管理全局状态。它提供了一个简单而强大的API来创建和连接store，使得跨组件的状态共享变得容易。

5. ESLint：这是一个开源的JavaScript代码检查工具，它通过分析代码来识别潜在问题并给出提示。ESLint可以帮助开发者遵循一定的编码规范，从而保持代码风格的一致性。

6. Prettier：Prettier是一个有态度的代码格式化工具，它支持大量编程语言并且已经集成到大多数编辑器中。使用Prettier的好处包括提高代码可读性、增强团队协作以及减少配置需求。

    

准备工作

为创建好的Vue项目安装ElementPlus、Axios依赖

npm install element-plus --save

npm install axios

为创建好的Vue项目配置ElementPlus (参照官网)

 

请求处理的工具类 – request.ts

utils/request.ts

import axios from 'axios'•//创建axios实例对象
const request = axios.create({
  baseURL: '/api',
  timeout: 600000
})
•//axios的响应 response 拦截器
request.interceptors.response.use(
  (response) => { //成功回调
    return response.data
  },
  (error) => { //失败回调
    return Promise.reject(error)
  }
)•export default request
​

与服务端进行异步交互的逻辑，通常会封装到一个单独的api中，如：dept.ts 。

api/dept.ts

import request from '@/utils/request'
import type { ResultModel } from '@/api/model/model';•//部门列表查询
export const queryAllApi = () =>  request.get<any, ResultModel>('/depts');

dept/index.vue

import { queryAllApi } from '@/api/dept’
//...省略•//动态加载数据-查询部门
const queryAll = async () => {
  const result = await queryAllApi()
  tableData.value = result.data
}

在vite.config.ts中配置前端请求服务器信息。

vite.config.ts

server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        secure: false,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }