vue2 到vue3的一些小问题

最新推荐文章于 2024-05-15 16:13:43 发布

枫火叶灵

最新推荐文章于 2024-05-15 16:13:43 发布

阅读量179

点赞数

分类专栏：我的Vue学习记录文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/WindHide520/article/details/125289340

版权

我的Vue学习记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了将项目迁移到Vue3和Element-plus过程中遇到的方法定义变化、Vuex集成、Axios配置以及端口替换等关键步骤。通过在main.js中注册全局方法，设置Vue3的全局属性，并调整axios请求。同时，详细展示了如何配置Vue.config.js以代理API端口和改变启动端口。最后，提及了作者对于eslint的态度。

摘要由CSDN通过智能技术生成

最近几天把写的项目转移到了Vue3和Element-plus遇到的一些小问题

首先定义全局方法的方式还有引用变了

Vue3我是这么写的

export function ServerDataRequest(yourUrl) {
    return this.$axios({
        method: "post",
        url: yourUrl,
    }).then((res) => {
        console.log("Request is Sucess! RequestMapping is ->\t" + yourUrl)
        return res.data
    }).catch(error => {
        console.log("Request is error! check your server! -> \t" + error);
        this.notify_messeage("数据获取失败，服务器的问题", "error")
    })
}
 
export function colorFuntion(color) {
    if (color == '晨岛') return 'blue'
    if (color == '云野') return 'green'
    if (color == '雨林') return 'cornflowerblue'
    if (color == '墓土') return 'black'
    if (color == '霞谷') return 'salmon'
    if (color == '禁阁') return 'slateblue'
}
 
export function notify_messeage(titled, typed) {
    this.$notify({
        title: titled,
        type: typed,
    });
}

然后main.js这样引用

import { ServerDataRequest, colorFuntion, notify_messeage } from '@/store/DefineFunction'
 
 
const app = createApp(App)
 
 
app.config.globalProperties.ServerDataRequest = ServerDataRequest // getdata
app.config.globalProperties.colorFuntion = colorFuntion // colorFuntion
app.config.globalProperties.notify_messeage = notify_messeage // otify_messeage
 
 
app.mount('#app')

然后是Vuex，如果是脚手架自己选择的Vuex安装那么就会在store下生成一个index.js文件，只要把原来的2项目中的代码放进对应的钩子下面就好了然后这么引用

import vuex from 'vuex'
import store from './store'
 
 
const app = createApp(App)
 
 
app.use(store)
app.config.globalProperties.vuex = vuex
 
 
app.mount('#app')

然后是axios的api端口替换以及启动的端口更改在3是这样子的

在根目录下有一个vue.config.js这样写就好了

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true
})
module.exports = { 
    devServer: {
        open: true,
        port: 8001, // 启动的端口
        proxy: {
            '/api': {
                target: 'http://localhost:8080/', // 你要替换的ip
                ws: true, // proxy websockets 
                changeOrigin: true, // needed for virtual hosted sites
                pathRewrite: {
                    '^/api': '' // rewrite path
                }
            },
        }
    }
}

~~最后就是eslint真的好玩，打死我也不开~~