idea的vue文件中使用ElementUi组件

2023-10-30

       作为计算机专业的学生,在做实训项目时很惆怅前端页面的搭建,这个时候就突出到了组件的好处;

       这篇就是给大家展示使用ElementUi组件!!!

       内容上分为vue3和之前的版本,自行选择!!!

       条条大道通罗马,加油!!!

目录

一、使用ElementUi组件的前提

二、idea中使用ElementUi

1.建vue.js项目

2. 项目布局样式

3.引入elementui

4.使用ElementUi

总结


一、使用ElementUi组件的前提

1.首先你要安装idea或者vs这类的编译软件,这里以idea为介绍

   下载安装idea 参考我之前的有关idea下载安装的博客

 IDEA 下载安装教程_桑稚远方~的博客-CSDN博客icon-default.png?t=M85Bhttps://blog.csdn.net/weixin_59367964/article/details/127900057?spm=1001.2014.3001.55022.其次你需要安装vue.js

     下载安装vue.js 参考我之前的有关vue.js下载安装的博客

 idea中使用vue.js的前期准备 保姆级教学_桑稚远方~的博客-CSDN博客icon-default.png?t=M85Bhttps://blog.csdn.net/weixin_59367964/article/details/127938017?spm=1001.2014.3001.5502把前期工作做好就可以开始我们今天的内容了

二、idea中使用ElementUi

1.建vue.js项目

  打开idea,(我用的是最新版的idea,老版本的static web—>vue.js)新建一个vue.js项目,在Vue Cli一定要选择标注的带 ~ 标识

   这个是vue.js的脚手架,可以快速搭建vue.js的项目,如果没有就是你没有系统性的安装vue.js

   参考上面给的链接进行前期工作准备

 兄弟们项目名称一定不要大写,会出错!!!下面已经改了

2. 项目布局样式

静静等待vuecli脚手架搭建项目,这个过程会很快,这是搭建成功的样子

3.引入elementui

在idea界面下面的打开   Terminal 工作台输入

npm i element-ui -S  // 对应vue3之前版本

npm install element-plus --save//对应vue3版本

看自己安装的vue版本,选择对应安装

下面截图出现的error便是我忘记安装了vue3,导致出错了,

在项目中的packpage.json——>dependencies  出现element -ui或者element-plus 代表引入成功

4.使用ElementUi

  之后就可以使用ElementUi上的组件了

   首先我要提一点,本篇只介绍如何安装使用Element U i组件并未使用

   路由router功能,

   网络请求axios功能

   完整的项目,一定会使用上述两种功能的,我应该会在后续介绍如何使用这两种功能

   有需要的可以关注博主!!!;

 

  (1)先在main.js中导入我们安装的element模块

          1. vue3版本装的是Element-plus,所以main.js中需要导入

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

           然后就是使用(.use 一定要在前面)

createApp(App).use(ElementPlus)

         整体main.js中是截图中的样子

 

     2.vue3之前的用下面的

   

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

(2)打开Element U i官网,随便找个东西将代码复制过来

 (3)放入APP.vue的<template>中,将其他的删掉

     截图中选中的就是复制代码放过来的地方

     红色标记的是组件,完整项目中是一定会使用的,现在不展示,里面的HelloWord 需要删掉

     箭头对应的就是组件放的位置,只是介绍一下,不用管,现在不用它

 (4).展示效果

         这就是组件效果 

总结

 这个组件的前期操作可能有些繁琐,当时全部弄完之后,你会发现特别的好用

弄完之后,用别人的代码,永远要比自己写着更快,更舒服,

添加其他的组件,你就可以搭建一个静态页面了

点赞关注不迷茫,共同进步!!!

点赞关注不迷茫,共同进步!!!

点赞关注不迷茫,共同进步!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

idea的vue文件中使用ElementUi组件 的相关文章

  • Vuejs - 如何使用 v-for 获取数组中的所有唯一值(删除重复项)

    如何只显示一个按钮distinct date 我可以使用两个 v for 循环吗 如何选择distinct我的循环中的值 div div
  • Font Awesome 图标未按预期在选项列表中加载(但在选择时加载)

    我有一个使用 bootstrap vue 的选项列表 如下所示 它在选择窗口中看起来不错 但打开下拉菜单时并非所有图标都显示 选择图标后 将显示 IE 螺栓显示 但选择时 图标列的代码
  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her
  • 有没有办法在 JetBrains IDE 之间同步设置?

    同步相似设置的最佳方式是什么捷脑公司 http www jetbrains com IDE 例如我有PyCharm http www jetbrains com pycharm and PhpStorm http www jetbrains
  • 基于 json 文件动态显示选择、复选框、日期选择器等

    对我之前的问题的补充 我根据 json 文件动态显示输入字段 现在我想根据它们的组显示选择项 复选框和日期选择器 我如何解决这个问题 我需要将这些元素推入computeJSON 但写入例如选择options item selection不管
  • Vuex store.watch 只接受 Vue routerguard 中的函数

    我正在尝试观察并等待 Vue 路由器防护从 Vuex 获取最终值 但它会抛出异常 vuex store watch 只接受一个函数 这是代码 const isAdmin get store getters user isAdmin unde
  • gradle.properties 文件放在哪里

    我正在关注Artifactory1 分钟设置 http www jfrog com video artifactory 1 min setup 我在本地主机上启动并运行了 Artifactory 现在我正在尝试将其与 Intellij Gr
  • Java Sqlite Gradle

    我对 gradle 和 java 还很陌生 我有一个使用 sqlite 的项目 它通过 intellij idea 运行良好 但我无法从终端运行它 它会抛出异常 java lang ClassNotFoundException org sq
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • Vue.js - 如何删除 hashbang #!来自网址?

    如何删除哈希爆炸 来自网址 我在 vue 路由器文档中找到了禁用 hashbang 的选项 http vuejs github io vue router en options html http vuejs github io vue r
  • Vuex存储数据总是驻留在内存中?

    首先 我希望您能理解我蹩脚的英语 我想知道Vuex的存储数据是否总是驻留在内存中 让我用一个例子来解释一下 当进入页面A时 我们从服务器收到一个列表 并实现将其存储在商店中 这是否意味着当我进入页面A并移动到页面B时 A的列表将保留在内存中
  • git 预提交钩子格式代码 - Intellij/Android Studio

    本要点展示了如何在预提交时使用 Eclipse 格式化程序自动格式化 Java 代码 Source https gist github com ktoso 708972 https gist github com ktoso 708972
  • IntelliJ:查看本地和 git 提交/分支之间所有已更改文件的差异

    使用 IntelliJ 的 diff 查看器是检查代码的一种非常好的方法 因为您可以使用 IntelliJ 代码编辑器的所有功能 重构 完成等 在本地版本中进行更改 不幸的是 我还没有弄清楚当你在 IntelliJ 中进行代码审查时如何做最
  • 无法删除 IntelliJ/Cursive 中的括号

    我正在使用 IntelliJ Cursive 编写 Clojure 我发现 删除括号的唯一方法就是将其中的内容完全删除 然后才能将括号删除 例如 假设我有以下代码 list 我只想删除左括号 一旦我在左括号上按退格键 IDE 就会忽略此行为
  • IntelliJ - 从测试覆盖率报告中排除某些类(包)

    我目前正在使用 Java 和 Play 框架 我有 JUnit 测试 并且正在尝试使用 IntelliJ 覆盖率运行器来测量覆盖率 不幸的是 Play 生成了一些垃圾类 IntelliJ 将它们包含在报告中 有没有办法排除覆盖率报告中的某些
  • Vue 2 日期选择器组件

    我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件 但在选择日期后尝试更新输入时遇到困难 这是我的代码 Vue component datepicker template
  • nuxtjs 无法在生产环境中显示动态 url

    我正在使用 nuxjs 构建我的项目 并创建一个动态显示地点信息的页面 当我跑步时npm run dev并测试http localhost 3000 place 66bb50b7a5 http localhost 3000 place 66
  • IntelliJ IDEA 覆盖 $user

    这是一个非常简单的问题 但我无法使用 SO Search 和 Google 找到答案 是否可以覆盖默认值 userVTL变量在文件模板中全局使用 而不是在每个模板中设置它 set user 就像 IntelliJ 本身的某种设置脚本一样 我
  • 有没有办法使用 Vue-Router 从动态 URL 中删除目录?

    我为一家保险经纪公司构建了一个 vue js Web 应用程序 其中每个代理人都有自己的网站 该网站是根据他们的个人资料生成的 这就是我的 vue router 索引文件中的链接的样子 path agents id name AgentSi
  • 如果用户在 Laravel 中经过身份验证,如何检查 Vue 组件?

    正如标题所述 我有点困惑如何根据用户是否登录并使用 Laravel 的 Auth 外观进行身份验证 使用 if else 语句处理 Vue 组件中的方法 我正在发出各种 Axios 请求 我需要根据用户是否登录来允许 禁止这些请求 我有 V

随机推荐

  • 数字化时代-20:一张图看清中国金融市场的轮廓

    关键词 资本 金钱 金融 银行 证券 保险 财政 中国制度优势 前言 本文试图通过图解的方式 从宏观上对中国的金融市场有一个初步的认识 在金融市场上流动的鲜血是金钱 金钱是金融市场 甚至整个经济的血液 金钱的充沛的流动给整个经济注入活力 金
  • 蓝桥杯 ADV-319 VIP试题 哈密尔顿回路(试题解析)

    试题 算法提高 哈密尔顿回路 提交此题 评测记录 资源限制 时间限制 2 0s 内存限制 256 0MB 问题描述 给出一个有向图 输出这个图的一个哈密尔顿回路 输入格式 输入的第一行包含两个整数n m 分别表示图的点数和边数 接下来m行
  • Java基础-实现zip解压缩

    可实现 文件 文件夹的解压缩操作 import java io File import java io FileInputStream import java io FileOutputStream import java io IOExc
  • Flutter控件——常用控件:Text

    Text text dart 源码 const Text String this data 要显示的字符串 Key key this style 样式TextStyle this strutStyle this textAlign 文本应如
  • 【C++】IO流

    文章目录 1 自定义类型与内置类型的相互转化 1 1operator 类型 2 C 文件IO 3 C 文件IO的二进制读取和文本读取 4 stringstream 类 1 自定义类型与内置类型的相互转化 在做IO类型的OJ的时候 有多个接收
  • 代码潜在故障的动态分析

    b size large 引子 size b 大家都听说过FindBugs的大名 这是一款静态代码分析的工具 能够直接对字节码文件加以分析 并发现潜在的反模式 anti pattern 从而有效地促进代码质量的改善 但FindBugs只能用
  • 核密度估计 Kernel density estimation

    简单贝叶斯分类 对于数值属性 如果不服从正态分布 但不知道服从何种分布形式 可以采用核密度估计的方法来进行预测 1 from http baike baidu com view 3380594 htm kernel density esti
  • windows常用命令

    1 打开控制台命令窗口 Win R 2 文件 目录 cd 切换目录 例 cd 显示当前目录 例 cd 进入父目录 例 cd d d 进入上次d盘所在的目录 或在直接输入 d 例 cd d d 进入d盘根目录 例 cd d 显示上次d盘所在的
  • C/C++中二级指针传递参数【个人遇到内存值发生改变现象的记录及相关修正方法】

    目录 0 前言 1 二级指针传参奇怪现象 2 分析 3 解决方法 0 前言 在c c 中 时常会使用到主调函数通过参数去获取被调函数中的数值情况 针对这种情况 我前面也写过C C 主调函数从被调函数中获取 各种类型 数据内容方式的梳理归纳文
  • 第一章:多点触摸与手势检测

    一 响应者链 只要继承了UIResponder的对象就可作为事件的响应者 实际上UIControl继承了UIView UIView又继承了UIResponder 由此可见 所有的对象都可作为事件的响应者 当用户与某个控件交互时 该控件将作为
  • java反射取得实体类中的属性和值

    Data public class Test private String name SneakyThrows public static void main String args Test test new Test test setN
  • stm32——按键(库函数版)

    不得不说进程太慢了 感觉很慌 但是干什么事情又非常的从容 学的很慢学着学着发现 不止是要学新东西 那些 以前早该知道的东西也忘了好多 还有 一定一定要好好学习 扩展知识面 什么东西都一定要学精 因为知识的封锁真的真的很可怕 很可怕 所以一定
  • RSA非对称加密解密的实现(公钥加密私钥解密、私钥加密公钥解密:签名)java

    本文是在参考文章的基础上修改的 对下面评论的问题进行一些测试和实现 同时对一些代码增加了相关的注释方便理解 需了解的知识 base64编码 非对称加密原理 问题 1 修改公私钥还可以成功解密 通过修改密钥测试 我的是会报错的 2 私钥加密公
  • 国内云服务器、境外地区访问宝塔面板异常的解决方法

    期国内部分机房连接广东电信 或我司广东其他节点存在异常 大多表现在用户访问宝塔面板时加载软件商店慢 打不开或绑定不了账户 或登录面板首页直接报错 面板运行时发生错误 解析软件列表发生错误 已尝试自动修复 请刷新页面重试 云服务器国内 香港地
  • ensp串口登录号2000冲突无法启动路由器

    ensp串口登录号2000冲突 重启ensp就好了
  • JavaScript二十四节气算法的实现(附源码)

    上一篇讲了JavaScript公历转农历算法的实现 这篇再讲一下24节气的实现 24节气即 立春 雨水 惊蛰 春分 清明 谷雨 立夏 小满 芒种 夏至 小暑 大暑 立秋 处暑 白露 秋分 寒露 霜降 立冬 小雪 大雪 冬至 小寒 大寒 24
  • [648]python3 使用newspaper库提取新闻内容(readability,jparser)

    GitHub https github com codelucas newspaper Newspaper文档说明 https newspaper readthedocs io en latest Newspaper快速入门 https n
  • 三进制 四进制计算机原理,三进制计算机(中国三进制计算机)

    三进制计算机理论上优于二进制计算机 但是 自然界具有三态的物质很少 三态现象也不多 所以三进制计算机目前没有发展前途 三态转换需要材料集成度和运算速度 三进制 编辑 定义 曾经被莫斯科大学科研人员用于计算机 在光子计算机研究领域也有涉及 对
  • Qt之进程通信-IPC(QLocalServer,QLocalSocket 含源码+注释)

    文章目录 一 IPC通信示例图 1 1 设置关键字并连接的示例图 1 2 进程间简单的数据通信示例图 1 3 断开连接的示例图 1 3 1 由Server主动断开连接 1 3 2 由Socket主动断开连接 1 4 Server停止监听后的
  • idea的vue文件中使用ElementUi组件

    作为计算机专业的学生 在做实训项目时很惆怅前端页面的搭建 这个时候就突出到了组件的好处 这篇就是给大家展示使用ElementUi组件 内容上分为vue3和之前的版本 自行选择 条条大道通罗马 加油 目录 一 使用ElementUi组件的前提