创建项目

dam@wangrunqindeMBP dev % yarn create vite increment-backup-client --template vue
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@5.1.0" with binaries:
      - create-vite
      - cva
[##] 2/2
Scaffolding project in /Users/dam/Projects/increment-backup/dev/increment-backup-client...

Done. Now run:

  cd increment-backup-client
  yarn
  yarn dev

✨  Done in 1.76s.

安装项目依赖

dam@wangrunqindeMBP increment-backup-client % sudo npm install

引入element plus组件

下载组件

yarn add element-plus

在main.js中使用组件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

测试

组件使用成功

整合路由router

下载组件

sudo yarn add vue-router@4.1.6

创建路由管理器index.js

// 定义一些路由
import Index from "../views/index.vue";

const routes = [
    { path: '/', component: Index }
]

export default routes;

使用路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

import routes from './router/index.js'
import * as VueRouter from 'vue-router';

const app = createApp(App)

const router = VueRouter.createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHistory(),
    routes, // `routes: routes` 的缩写
})

app.use(router);
app.use(ElementPlus)
app.mount('#app')

App.vue上面使用

<script>
export default {
  name: 'App'
}
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

测试

引入成功

整合axios

下载组件

"axios": "^0.27.2"

工具类axiosRequest.js

import axios from 'axios'
import {ElMessage} from "element-plus";

//获取配置文件 .env.development 的数据
const BASE_URL = "http://localhost:8899";
const REQUEST_TIMEOUT = 5000;

// create an axios instance
const service = axios.create({
    baseURL: BASE_URL, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: REQUEST_TIMEOUT // request timeout
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
)

// 相应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code) {
            console.log("res：" + JSON.stringify(res));
            if (res.code !== '0') {
                ElMessage({
                    message: res.message || '请求出错了',
                    type: 'error',
                    duration: 2 * 1000
                })
                return Promise.reject(new Error(res.message || '请求出错了'))
            } else {
                // return res
                return Promise.resolve(res)
            }
        }else {
            return Promise.reject(new Error(res.message || '请求出错了'))
        }
    },
    error => {
        // alert("error：" + JSON.stringify(error))
        // console.log('err' + error)
        ElMessage({
            message: error.message,
            type: 'error',
            duration: 2 * 1000
        })
        return Promise.reject(error)
    }
)

export default service
export {BASE_URL}

工具类使用

import request from '../utils/axiosRequest.js'

const apiName = '/source'

export default {
    list(data) {
        return request({
            url: `${apiName}/list`,
            method: "post",
            data: data
        })
    }
 }