首页 > 其他分享 >vue3 引入 ElementUI

vue3 引入 ElementUI

时间:2024-03-14 23:22:18浏览次数:30  
标签:use ElementUI element plus vue3 引入 import

 

vue3使用elementUI会报错,需要引入elementUI Plus。

Plus 官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.html

UI 官网:https://element.eleme.cn/#/zh-CN/component/installation

1. 安装 ElementUI Plus

npm install element-plus --save

 package.json检查。 

 

 

2. 修改main.js 或 main.ts。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import ElementPlus from 'element-plus' //全局引入

import 'element-plus/theme-chalk/index.css';

createApp(App).use(router).use(scroll).use(ElementPlus).mount("#app");

 

 

3. 页面直接copy组件。

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

 

标签:use,ElementUI,element,plus,vue3,引入,import
From: https://www.cnblogs.com/warmNest-llb/p/18074266

相关文章

  • springboot3+vue3(十一)springboot多环境开发
    在开发中我们往往会遇到,本地环境、测试环境、生产环境分别一套配置。如数据库连接,端口号等配置各不相同的问题。 1、多文件配置    2、多文件分组配置如果配置文件有很多的配置信息几百行的情况,为了方便维护我们可以根据功能的情况进行分组拆分。如:服务器相关配......
  • vue3 瀑布流 vue-masonry使用方法
    npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"......
  • 【Vue3】element-plus按需自动导入的配置 以及icon不显示的解决方案
    首先需要安装unplugin-vue-components,unplugin-auto-import,unplugin-icons三款插件。npminstall-Dunplugin-vue-componentsunplugin-auto-importunplugin-icons然后vite.config.js里加入下面的配置:import{defineConfig}from"vite";importVuefrom"@vitejs/plug......
  • 低代码与Vue3:重塑软件开发的未来
    随着技术的不断进步,软件开发领域正经历着一场革命性的变革。在这场变革中,低代码平台和Vue3框架扮演着举足轻重的角色。本文将深入探讨低代码与Vue3的结合如何为软件开发带来前所未有的便利和效率。低代码平台:简化开发过程低代码平台是一种允许开发者通过图形化界面和预构建......
  • 问题记录:Vue3的watch,如何做到在监听值没变化的情况下调用相关函数去请求接口?
    一般来说Vue的watch属性只在监听到值发生变化了,才会去执行相关代码。可是最近在做项目(Vue3+TS+Vite)的时候,遇到了这种情况:标题如图所示:Modal是在父组件里写的,Modal里的折线图是在子组件里写的。点击按钮后会获取到pid和vid的值传给子组件。子组件通过watch属......
  • Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解(SFC)
    项目结构使用Vite创建Vue3+JS默认项目结构如下:(vmoudle1是项目名)Vue中提出了组件的概念。组件是代码复用的一种方式,用于抽象出一个可复用的UI,方便在不同的场景中进行重复使用。组件根据大小可被分为:(从小到大)1.组件2.布局组件3.页面级别组件.vscode忽略node......
  • springboot3+vue3(十)springboot属性配置方式
    在项目中如端口号等配置信息在yml配置文件中,打包发布后这些信息运维人员无法进行修改的问题时有发生,如:改变项目运行的端口号等。我们除了在项目的yml配置文件中配置外,还有以下三种配置方法:1、命令行参数方式 --键=值    例如:我们想把项目的端口改为9999  --server.p......
  • springboot3+vue3(九)打包部署(windows)
    1、在pom中添加打包插件坐标(如果创建项目选的是springboot创建会自动生成打包插件)<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artif......
  • 基于ts的node项目引入报错归纳
    一、导入类型定义文件错误node_modules/@types/leaflet/index.d.ts:128:1128export=e;Thismoduleisdeclaredwith'export=',andcanonlybeusedwithadefaultimportwhenusingthe'esModuleInterop'flag.这个错误表明使用export=语法,但TypeSc......
  • Vite+Vue3打包性能优化 Gzip压缩
    安装插件npmivite-plugin-compression-D配置文件//vite.config.tsimportviteCompressionfrom'vite-plugin-compression';exportdefault()=>{return{plugins:[viteCompression({threshold:10240,//设置只有大于10kb的......