Nuxt+vue3+Element-plus+TypeScript_nuxt3 typescript vue plugin

进公司实习一段时间了，想用学到的东西进行独立开发，踩坑不少，做个总结

1 Nuxt集成Element-plus

这里巨坑，找了很久才找到
(1) 在plugins中新建element-plus.js

import { defineNuxtPlugin } from "~~/.nuxt/imports";
import ElementPlus from 'element-plus/dist/index.full'
import * as ElIconModules from '@element-plus/icons-vue'


export default defineNuxtPlugin(nuxtApp=> {
  nuxtApp.vueApp.use(ElementPlus)
  for(const iconName in ElIconModules) {
    const icon = ElIconModules[iconName]
    nuxtApp.vueApp.component(iconName, icon)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

(2) 在nuxt.config.js中配置

export default defineNuxtConfig({
  css: [
    'element-plus/dist/index.css'
  ]
});
1
2
3
4
5

(3) 在assets文件夹中新建scss文件,再新建index.scss

@use "element-plus/dist/index.css";
1

这样就好了

2 使用provide和inject注入异步数据出错

首先使用ref变为响应式，然后先provide，再对数据进行操作

const arr=ref([])

provide('arr',arr)

http.then(res=>{
	arr=res.data
})

1
2
3
4
5
6
7
8