運行一個pro-vue3的前端項目，以及后端服務

在基礎設施-代碼生成模塊中選擇某張數(shù)據(jù)庫表導入，并編輯生成信息，前端類型：Vue2+Element UI標準模板

在vue3項目中創(chuàng)建一個vue文件

<template>
</template>

<script>
// import {create} from '@/api/test'

export default{
  created(){
    create().then(res => {
      console.log(res);
    })
  }
}
</script>

1.4 src\api\test.js

import request from '@/utils/request'

// 創(chuàng)建藥品
export function create(data) {
  return request({
    url: '/drug//create',
    method: 'post',
    data: data
  })
}

Vue2+Element UI標準模板生成的前端封裝好的request請求接口對象

1.5 報錯

09:47:36 [vite] hmr update /src/views/tb/drug/index.vue
Failed to load url /src/utils/request (resolved id: C:/Users/lxz/Desktop/project/drug-system/ruoyi-vue-pro-drug/yudao-ui-admin-vue3/src/utils/request) in C:/Users/lxz/Desktop/project/drug-system/ruoyi-vue-pro-drug/yudao-ui-admin-vue3/src/api/test.js. Does the file exist?

問題：在 更新的/src/views/tb/drug/index.vue 文件中，沒有找到 /src/utils/request 這個文件

解決辦法： 從vue2項目中將/src/utils/request.js 這個文件復制到vue3項目的對應文件夾下

1.6 報錯

09:44:01 [vite] Internal server error: Failed to resolve import "element-ui" from "src\utils\request.js". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/lxz/Desktop/project/drug-system/ruoyi-vue-pro-drug/yudao-ui-admin-vue3/src/utils/request.js:2:51
  1  |  import axios from 'axios'
  2  |  import {Message, MessageBox, Notification} from 'element-ui'
     |                                                    ^
  3  |  import store from '@/store'
  4  |  import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'

• import axios from ‘axios’

  這個是vue2項目中直接引入使用的外部axios依賴

   "dependencies": {
      "@babel/parser": "7.18.4",
      "@riophae/vue-treeselect": "0.4.0",
      "axios": "0.27.2",
       ...
  

  在vue3項目中沒有直接使用這個依賴，而是對axios進行了擴展

    "dependencies": {
      "@element-plus/icons-vue": "^2.1.0",
      "@form-create/designer": "^3.1.3",
      "@form-create/element-ui": "^3.1.24",
      "@iconify/iconify": "^3.1.1",
      "@videojs-player/vue": "^1.0.0",
      "@vueuse/core": "^10.6.1",
      "@wangeditor/editor": "^5.1.23",
      "@wangeditor/editor-for-vue": "^5.1.10",
      "@zxcvbn-ts/core": "^3.0.4",
      "animate.css": "^4.1.1",
      "axios": "^1.6.1",
  

  vue3項目中的axios封裝鏈：

  1. 從vue3項目的src/system/area/index.ts文件中封裝的request對象進行向底層追溯

     import request from '@/config/axios'
     
     // 獲得地區(qū)樹
     export const getAreaTree = async () => {
       return await request.get({ url: '/system/area/tree' })
     }
     
     // 獲得 IP 對應的地區(qū)名
     export const getAreaByIp = async (ip: string) => {
       return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
     }
     

  2. 進入 src/config/axios/index.ts文件中

     import { service } from './service'
     
     import { config } from './config'
     
     const { default_headers } = config
     
     const request = (option: any) => {
       const { url, method, params, data, headersType, responseType, ...config } = option
       return service({
         url: url,
         method,
         params,
         data,
         ...config,
         responseType: responseType,
         headers: {
           'Content-Type': headersType || default_headers
         }
       })
     }
     
     export default {
       get: async <T = any>(option: any) => {
         const res = await request({ method: 'GET', ...option })
         return res.data as unknown as T
       },
       post: async <T = any>(option: any) => {
         const res = await request({ method: 'POST', ...option })
         return res.data as unknown as T
       },
       postOriginal: async (option: any) => {
         const res = await request({ method: 'POST', ...option })
         return res
       },
       delete: async <T = any>(option: any) => {
         const res = await request({ method: 'DELETE', ...option })
         return res.data as unknown as T
       },
       put: async <T = any>(option: any) => {
         const res = await request({ method: 'PUT', ...option })
         return res.data as unknown as T
       },
       download: async <T = any>(option: any) => {
         const res = await request({ method: 'GET', responseType: 'blob', ...option })
         return res as unknown as Promise<T>
       },
       upload: async <T = any>(option: any) => {
         option.headersType = 'multipart/form-data'
         const res = await request({ method: 'POST', ...option })
         return res as unknown as Promise<T>
       }
     }
     

     封裝http請求對象，并導出get、post、postOriginal、delete、put、download、upload等公共方法

  3. 進入 ./config文件中

     const config: {
       base_url: string
       result_code: number | string
       default_headers: AxiosHeaders
       request_timeout: number
     } = {
       /**
        * api請求基礎路徑
        */
       base_url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,
       /**
        * 接口成功返回狀態(tài)碼
        */
       result_code: 200,
     
       /**
        * 接口請求超時時間
        */
       request_timeout: 30000,
     
       /**
        * 默認接口請求類型
        * 可選值：application/x-www-form-urlencoded multipart/form-data
        */
       default_headers: 'application/json'
     }
     
     export { config }
     

     封裝了http請求的請求基礎路徑、返回結果狀態(tài)碼、請求頭、請求超時時間等配置信息

  4. 進入./service文件中

     import axios, {
       AxiosError,
       AxiosInstance,
       AxiosRequestHeaders,
       AxiosResponse,
       InternalAxiosRequestConfig
     } from 'axios'
     

? 在這里可以看到vue2項目中使用的axios對象,此時，vue3項目中使用的axios版本和vue2項目中使用的版本不一致可能會存在隱患

• import {Message, MessageBox, Notification} from ‘element-ui’

? 此處引用了element-ui的依賴，在vue3項目中已經棄用了element-ui而是采用Element Plus

? vue3項目中的依賴

    "element-plus": "2.4.2",

? vue2項目中依賴

  "element-ui": "2.15.12",

? 需要對vue2項目中的request.js中使用的element-ui進行改造成element-plus中的組件！

• import store from ‘@/store’

  在vue2項目中使用的vuex來做狀態(tài)管理的，在vue3項目中是沒有引入vuex依賴的

  在vue3項目中使用了vue-demi來解決這個問題嗎，那么我們在保證vue-demi可用的前提下可以不用考慮這個問題！

• import {getAccessToken, getRefreshToken, getTenantId, setToken} from ‘@/utils/auth’

  這個在vue3項目中已經兼容了并且做了局部功能升級，在vue2版本的項目中沒有對AccessTokenKey，RefreshTokenKey加入到瀏覽器本地存儲中，在vue3項目中引入了web-storage-cache來做本地存儲

     "web-storage-cache": "^1.1.1",
  

可以在使用生成Vue2+Element UI標準模板的api.js文件中使用vue3項目封裝的ts文件中對象

// import request from '@/utils/request'
// 這個是vue3項目中使用.ts文件封裝的http請求對象
import request from '@/config/axios'

// 創(chuàng)建藥品
export function create(data) {
  return request({
    url: '/drug//create',
    method: 'post',
    data: data
  })
}

// 獲得地區(qū)樹 這個是ts文件封裝的http請求對象的使用方法
export const getAreaTree = async () => {
  return await request.get({ url: '/system/area/tree' })
}

這個文件是src\api\test.js

<template>
111
</template>

<script>
import {getAreaTree} from '@/api/test'

export default{
  created(){
    getAreaTree().then(res => {
      console.log(res);
    })
  }
}
</script>

這是測試的vue文件打印到請求的數(shù)據(jù)
文章來源地址http://www.zghlxwxcb.cn/news/detail-771678.html

根據(jù)vue2模板生成的vue頁面代碼無法直接在vue3項目中使用，需要逐個修改生成的.vue文件中的代碼

  Plugin: vite-plugin-eslint
  File: C:/Users/lxz/Desktop/project/drug-system/ruoyi-vue-pro-drug/yudao-ui-admin-vue3/src/views/tb/drug/index.vue
12:13:26 [vite] Internal server error:
C:\Users\lxz\Desktop\project\drug-system\ruoyi-vue-pro-drug\yudao-ui-admin-vue3\src\views\tb\drug\index.vue
    7:89   error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   10:99   error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   13:95   error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   16:92   error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   19:100  error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   22:96   error    '.native' modifier on 'v-on' directive is deprecated                                  vue/no-deprecated-v-on-native-modifier
   25:25   warning  Expected a linebreak before this attribute                                            vue/first-attribute-linebreak

到了這里，關于rouyi-vue-pro+vue3+vite4+Element Plus項目中使用生成Vue2+Element UI標準模板的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！