前端小记：vue3差异记录

一、vue3引入element ui报错

定位到main.js文件，开始代码为：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


createApp(App).use(ElementUI);

createApp(App).use(router).mount('#app')

报错信息：

原因：vue3.0不在支持element ui，可用element-plus替代
npm安装element-plus

$ npm install element-plus --save

参考element-plus官网，修改main.js代码为

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

const app = createApp(App)
app.use(ElementPlus)

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

报错解决：

二、vue3封装方法供全局调用

先来看不使用全局调用的方式，以getRequest方法为例。
js中定义：

//src/utils/api.js
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${url}`,
        data: params
    })
}

若在.vue文件中使用getRequest方法，首先需要在script标签内引入getRequest，如：

<script>
import {getRequest} from "@/utils/api";

getRequest
...
methods:{
getRequest(...)
}
</script>

若想省略这种引用，可在main.js文件中统一引入，以后调用的时候在方法前面加this即可
定位到main.js文件，参考globalproperties，下方代码关注点为app.config.globalProperties.getRequest=getRequest

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//请求方法的封装
import {getRequest} from "@/utils/api";

const app = createApp(App)

app.use(ElementPlus)

app.config.globalProperties.getRequest=getRequest

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

调用：

<script>

...
methods:{
this.getRequest(...)
}
</script>

vue2的main.js中用Vue.prototype.getRequest=getRequest和vue3的main.js用app.config.globalProperties.getRequest=getRequest的效果相同。