vue2 到vue3的一些小问题

最近几天把写的项目转移到了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真的好玩，打死我也不开