【 Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus 第二篇】(持续更新中)

原创已于 2023-01-12 15:40:29 修改 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue3 #vite

于 2023-01-05 15:01:06 首次发布

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用Axios进行API请求配置，包括环境变量的设置和封装Axios请求，同时讲解了ElementPlus的使用，以及如何通过封装组件和环境变量来从本地JSON文件获取数据，为后续的组件交互和数据传递打下基础。

在第一篇中我们讲述了Vue3框架的搭建以及Vue3的常用语法，这篇文章将使用 Axios 和 Element Plus 并使用封装组件的方式完成表格搭建。

本期需要掌握的知识如下:

目录路径别名@
引入并封装 Axios 请求
配置 .env 文件
通过 api 接口获取数据

下期需要掌握的知识如下:

组件的封装和引入
子组件通过 emit 改变父组件的值
父组件通过 defineExpose 改变子组件的值

因本地项目不需要后端介入，故所有的api都将请求项目根目录JSON文件

1. `@`替代 `/src`路径别名

vite.config.js

import { defineConfig } from 'vite'
import { resolve } from "path" // 引入 resolve 方法
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 添加 resolve 对象
  resolve: {
    alias: {
      // 在此设置路径别名
      "@": resolve(__dirname, "./src")
    }
  },
  server:{
		host:'0.0.0.0'
	}
})

2. `axios` 使用 && `.env` 配置文件

安装命令:npm install axios vue-axios

安装完成后在main.js 中引入 axios

import axios from 'axios'
import VueAxios from 'vue-axios'

createApp(App)use(ElementPlus, { locale: zhCn }).use(VueAxios, axios).mount('#app')

配置 .env文件

在这里插入图片描述

我们在项目根目录下新建 .env 和 .env.prod文件
分别对应 本地环境 和 生产环境

// 这里是环境配置
VITE_NODE_ENV = "dev"  
// 这里是设置的请求的基础路径 也就是 baseURL
VITE_NODE_BESE_API = '/'

VITE_NODE_ENV = "prod"
VITE_NODE_BESE_API = 'https://blog.youkuaiyun.com/Web_chicken'

使用 Vite构建的Vue3项目，必须以 VITE_NODE 开头，否则不生效，或者请参考其他文章以暴露其他字符开头的环境变量

打包命令配置

//package.json
"scripts": {
    // 不设置mode的话 默认就是使用 .env 文件配置
    "dev": "vite --host",
    "build": "vite build",
    // 如需使用其他配置文件 在后边加上 --mode xxx 即可
    "build:prod": "vite build --mode prod",
    "preview": "vite preview"
  },

页面使用env环境变量

const env = import.meta.env

二次封装 axios

在 src目录下新建 utils文件夹，并在该文件夹下新建 request.js，用来封装 axios 请求

在这里插入图片描述

import axios from 'axios'; // 引入axios
import { showNprogress, hideNprogress } from '@/mixin' // 封装的 NProgress顶部进度条方法，可忽略
const baseURL = import.meta.env.VITE_NODE_BESE_API // 根据 env 配置文件获取 baseURL , 如果暂时不了解的话可以先设置
const baseURL = '/'

// 创建 axios 请求
const service = axios.create({
  baseURL
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    showNprogress() // 进度条开始
    return config // return config
  },
  err => {
    hideNprogress() // 进度条关闭
    return Promise.reject(err)  // 进入 err return err
  }
)

// 相应拦截器
service.interceptors.response.use(
  res => {
    showNprogress()
    // res.status === 200 说明请求成功 反之失败
    if (res.status === 200) {
      hideNprogress()
      return res.data
    } else {
      hideNprogress()
      return Promise.reject(res.data)
    }
  },
  err => {
    console.log(err)
    hideNprogress()
    return Promise.reject(err)
  }
);
// 导出 service
export default service;

创建`table.json`接口，获取数据

在这里插入图片描述
public 目录为项目根目录，可通过 /table.json访问该文件

{
  "data": [
    {
      "id": 1,
      "date": "2016-05-03",
      "name": "admin",
      "address": "No. 189, Grove St, Los Angeles"
    },
    {
      "id": 2,
      "date": "2016-05-02",
      "name": "Tom",
      "address": "No. 189, Grove St, Los Angeles"
    },
    {
      "id": 3,
      "date": "2016-05-04",
      "name": "Tom",
      "address": "No. 189, Grove St, Los Angeles"
    },
    {
      "id": 4,
      "date": "2016-05-01",
      "name": "Tom",
      "address": "No. 189, Grove St, Los Angeles"
    }
  ]
}

`api`封装及使用

在 src目录下新建 api文件夹，并在该文件夹下新建 index.js，用来封装 api 请求

// 引入 axios 
import request from '@/utils/request'
// 封装获取列表数据的方法并导出
export const getTableList = () => {
  return request({
  	// 请求地址
    url: 'table.json',
    // 请求方式
    method: 'GET'
  })
}

使用`api`方法获取数据

<el-table :data="tableData" style="width: 100%" border stripe>
  <el-table-column v-for="{id,prop,label} in tableColumn" :prop="prop" :key="id" :label="label" :width="label=='序号' ? 100 :''" align="center" />
  <el-table-column fixed="right" label="操作" align="center" width="240">
    <template #default="scope">
      <el-button link type="primary" size="small" @click="handlEmodify(scope.row)">编辑</el-button>
      <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
      <el-button link type="primary" size="small" @click="handlDetail(scope.row)">查看</el-button>
      <el-button v-if="scope.row.name==='admin'" link type="primary" size="small" @click="handleAdmin(scope.row)">管理系统</el-button>
    </template>
  </el-table-column>
</el-table>

// 别忘了在script标签加上 setup
import { ref, onMounted } from 'vue' // 导入 ref 生命周期函数
import { ElMessage } from 'element-plus' // 导入 Element Plus 消息提示
import { getTableList } from '@/api/home.js' // 导入接口 api

/**
 * @type data
 * @description 所有数据都在此体现
 * **/

const tableData = ref([]) // 在此定义 tableData ,并使用 ref 使其具备响应式

// 用来循环列表字段的，如字段固定可不结构为响应式
const tableColumn = ref([
  { id: 1, prop: 'id', label: '序号' },
  { id: 2, prop: 'date', label: '时间' },
  { id: 3, prop: 'name', label: '姓名' },
  { id: 4, prop: 'address', label: '地址' }
])

/**
 * @type 生命周期
 * @description 所有生命周期函数都在此体现
 * **/

onMounted(() => {
  // 在生命周期函数中调用初始化表格方法
  initTable()
})


/**
* @type methods
* @description 所有方法、事件都在此层中体现
* **/

// 初始化表格
const initTable = async () => {
  // 调用 api 方法，获取数据 并赋值给 tableData
  let res = await getTableList()
  ElMessage.success('获取成功')
  // 注意 使用 ref结构的数据 在 js中必须使用.value来设置或获取它的值
  if (res.data) return tableData.value = res.data
}