Nuxt+vue3+Element-plus+TypeScript

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值