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组件 的相关文章

随机推荐

  • 数字化时代-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组件的前提