Nuxt+vue3+Element-plus+TypeScript

丁绪
2023-12-01

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

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)
  }
})

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

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

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

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

这样就好了

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

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

const arr=ref([])

provide('arr',arr)

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

 类似资料: