Vue3导入Element-plus方法

这篇具有很好参考价值的文章主要介绍了Vue3导入Element-plus方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先引入依赖

npm install element-plus --save

main.js中要引入两个依赖

import ElementPlus from 'element-plus';
import "element-plus/dist/index.css";

然后 这个东西 我们最好还是挂载vue上
所以 还是

createApp(App).use(ElementPlus)

Vue3导入Element-plus方法

然后 我们可以在组件上试一下用一个ElementUi的表格组件
参考代码如下

<template>
  <div>
     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup(){
    const tableData = reactive([{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }])
    return {
      tableData
    }
  }
};
</script>

运行结果如下
Vue3导入Element-plus方法
也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-460605.html

到了这里,关于Vue3导入Element-plus方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3自动引入组件(unplugin-auto-import和element-plus)

    在使用 Vue3 开发项目时,我们经常需要引入多个组件,但是每次手动引入非常麻烦,容易出错。为了解决这个问题,我们可以使用 unplugin-auto-import 插件自动引入组件,提高开发效率。本篇博客将详细介绍如何在 Vue3 项目中使用 unplugin-auto-import 插件。 首先,在项目中安装 un

    2024年02月13日
    浏览(50)
  • Vue3+TS+Vite创建项目,并导入Element-plus和Sass

    1.桌面新建一个文件夹Vue3-app 打开编辑器导入文件夹,编辑器打开终端输入或者命令行工具cd到项目目录下输入 npm init vue@latest 回车运行 这里我选择了TS+Vite来开发,并选择安装路由 2.cd到 vue-project目录下 输入 npm install 回车运行 3.安装完成后 输入 npm run dev 回车运行 浏览器打开

    2024年02月16日
    浏览(59)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(70)
  • 在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework

    Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework. Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较多,就选择了Element-Plus作为这个Blog项目的UI Framework. UI Framework的好处就是提供了相较裸Html+CSS开发起来更好看和方便一些.

    2023年04月13日
    浏览(42)
  • vue3按需导入element-plus报错Module not found: Error: Can‘t resolve ‘element-plus/es/components/button/

    由于element-plus版本更新迭代较快,直接安装 npm install element-plus -D 会默认安装最新版本,使用时可能会报错: 可以安装这个稳定的版本: 就可以直接在vue文件中调用了:

    2024年02月12日
    浏览(44)
  • Vue3中动态绑定:disabled element-plus使用方法

    @change=\\\"whetherFlag($event)\\\"  根据value值判断是否禁用 :disabled=\\\"isShow\\\" 初始值为禁用状态 const isShow = refboolean(true);  根据value的值判断是否禁用  

    2024年01月25日
    浏览(59)
  • Vite vue 使用cdn引入element-plus

    vite-plugin-cdn-import:cdn的引入插件 vite.config.js 使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错, 注意点 ①  如果不引入vue,就会提示createElementVnode找不到, 原因是在element-plus这个源码中也在使用vue这个变量   ②如果不引入vue-demi,可以理解为vu

    2024年02月01日
    浏览(55)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(80)
  • vue3 element-plus 实现图片预览

    element-plus下有这么一个组件 el-image-viewer /,但是这个组件是没写在文档上面的,像普通组件一样使用即可 可以通过点击按钮实现图片预览,而非el-image组件只能通过点击图片实现预览 2.1封装组件 2.3组件使用 在需要使用的地方引入,然后使用即可,这不是重点,每个人使用的

    2024年02月15日
    浏览(59)
  • vue3项目搭建并配置element-plus

    安装完成后,输入如下指令查看vue的版本: 选择一个要存放项目的目录,打开小黑窗输入如下命令: 一开始输入项目名称或者默认vue-project,然后根据需求选择Yes/No 生成完项目后,输入如下指令: src/main.js里引入 index.css的文件位置根据实际情况写,也有可能是 const app后面加

    2024年02月13日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包