element ui 安装 简易过程 已解决

news2024/12/24 19:26:04

我之所以将Element归类为Vue.js,其主要原因是Element是(饿了么团队)基于MVVM框架Vue开源出来的一套前端ui组件。我最爱的就是它的布局容器!!!

下面进入正题:

1、Element的安装

首先你需要创建一个Vue初始项目,再在初始项目中进行安装~初始项目的创建参见我之前的博客:Vue项目初始化

通过cd命令进入想要安装Element的目录(即上一步初始化得到的Vue项目):

cd D:
cd D:\WebstormProjects\test_vuecli

安装Element:

npm i element-ui -S

安装完成后可以在 \test_vuecli\node_modules\目录下找到element-ui,还可以在项目根目录\test_vuecli\下的package.json文件中的dependencies项中找到element-ui的版本信息,如:"element-ui": "^2.4.4"

2、使用Element

(1)Element的引入

在项目\test_vuecli\src\目录下的main.js文件中写入以下内容:

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

以上代码便完成了 Element 的引入,需要注意的是,样式文件需要单独引入(即index.css)。

(2)使用Element组件

以分页样式组件为例,我们在Element官网组件中找到了Pagination 分页项。

 

假设我们选定“带背景色的分页”,查看源代码(源码非常简洁):

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

接下来在\test_vuecli\src\components\目录下创建名为paging.vue的组件,直接将上面的源代码复制到<template><div></div></template>标签中。

(3)加载Element组件

在第(2)步创建paging,vue时,会自动生成以下代码:

<script>
    export default {
        name: "paging"
    }
</script>

目的是方便我们加载该组件,组件名为“paging”,接下来找到项目入口文件App.vue,在需要放分页的地方加上<paging></paging>

<el-footer>
    <!--分页-->
  <paging></paging>
</el-footer>

并在App.vue文件的<script></script>中添加以下代码:

import paging from './components/paging.vue'
export default {
    name:'App',
    components:{
      paging
    }
  };

保存后运行项目:在Webstrom中的左下角点击npm,右键start→run start

运行结果:

点击链接查看页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1465849.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试时,被问到频繁跳槽该如何回应?

有数据显示&#xff0c;现在的职场人&#xff0c;跳槽越来越频繁&#xff0c;95后平均7个月就离职。 对于面试官来说&#xff0c;一个跳槽过于频繁的人总是存在潜在风险&#xff0c;比如抗压力差、稳定性不好、心不定这山望着那山高、职业规划不清晰等等。 我一直强调一个观点…

TYPE-C接口桌面显示器:视频与充电的双重革新

在现代科技的浪潮中&#xff0c;TYPE-C接口桌面显示器崭露头角&#xff0c;它不仅仅是一台显示器&#xff0c;更是充电与视频传输的完美融合。这种新型的显示器&#xff0c;凭借其TYPE-C接口&#xff0c;实现了从DC电源到PD协议充电的华丽转身&#xff0c;为众多设备如笔记本电…

二、基本语法

一、变量声明 1、语法 <变量名称>: <变量类型> <变量值> 2、变量类型 字符串&#xff1a;string 数值&#xff0c;整数、浮点数都可以&#xff1a;number 布尔&#xff1a;boolean 任意类型&#xff1a;any 联合类型&#xff0c;指定的多个类型中的…

SQL字符集

目标:了解字符集的概念&#xff0c;掌握MySQL数据库存储数据的字符集逻辑以及设置方式 字符集概念 MySQL字符集关系 解决乱码问题 字符集设置原理 1、字符集概念 目标:了解字符集概念&#xff0c;掌握字符集存储和读取的实现原理 概念 字符集:charset或者character set&am…

Microsoft 365自定义安装软件

如图&#xff0c;在安装类型的步骤的时候&#xff0c;可以勾选自己想要的软件&#xff08;而非一股脑儿的安装一大堆自己不需要的&#xff09;。

冒泡排序法的名字由来,排序步骤是什么,最坏情况下的排序次数如何计算得来的呢?

问题描述&#xff1a;冒泡排序法的名字由来&#xff0c;排序步骤是什么&#xff0c;最坏情况下的排序次数如何计算得来的呢&#xff1f; 问题解答&#xff1a; 冒泡排序法的名字来源于排序过程中较大的元素会像气泡一样逐渐“冒”到序列的顶端&#xff0c;而较小的元素则会逐…

springsecurity+vue前后端分离适配cas认证的跨域问题

0. cas服务搭建参考:CAS 5.3服务器搭建_cas-overlay-CSDN博客 1. 参照springsecurity适配cas的方式, 一直失败, 无奈关闭springssecurity认证 2. 后端服务适配cas: 参考前后端分离项目(springbootvue)接入单点登录cas_前后端分离做cas单点登录-CSDN博客 1) 引入maven依赖 …

【工具】阿莫智能设备之脱机烧录器K202C-1

注意&#xff0c;本文档仅仅是介绍烧录器的资料构成&#xff0c;并非烧录器的说明书&#xff0c;详细请看各对说明书及视频。 1. 资料图解 首先需要下载资料&#xff0c;通常稳定发布版本可以从 www.amomcu.cn 下载&#xff0c; 也可以向我们客服获取最新版本&#xff0c; 获…

多线程读写锁应用

实际场景 大多数情况下&#xff0c;线程只是读取共享变量的值&#xff0c;并不修改&#xff1b;只有少数情况下&#xff0c;线程才真正修改共享变量的值 "读" & "写" 场景下的临界区保护 多个线程同时读取一个共享变量时&#xff0c;并不存在冲突 (无…

基于PID控制器的直流电机位置控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 1. PID控制器原理 2. 位置控制环 5.完整工程文件 1.课题概述 基于PID控制器的直流电机位置控制系统。直流电机位置控制系统是工业自动化领域中的一个重要应用。为了实现精确的位置控制&#xff0c;常采…

第七篇【传奇开心果系列】python的文本和语音相互转换库技术点案例示例:Sphinx自动电话系统(IVR)经典案例

传奇开心果博文系列 系列博文目录python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、雏形示例代码二、扩展思路介绍三、Sphinx多语言支持示例代码四、Sphinx和语音合成库集成示例代码五、Sphinx语音识别前自然语言预处理示例代码六、Sphinx语音识别自动电话系统…

ApexRBp在线粒子传感器在电动汽车电池制造的应用

电动汽车电池的崛起与颗粒污染的挑战 随着电动汽车&#xff08;EV&#xff09;市场的迅速扩张&#xff0c;对高性能锂离子电池的需求也急剧增加。这些电池不仅是EV的心脏&#xff0c;更是推动其前行的核心动力。然而&#xff0c;在电池制造的每一个环节&#xff0c;都需要对多…

Vite+Vue3+Ant Design3.2报错: Cannot read properties of null (reading ‘isCE‘)

最近的ViteVue3Ant Design Vue3.2开发的项目莫名其妙的报错&#xff1a; Uncaught (in promise) TypeError: Cannot read properties of null (reading isCE) 一直找不到原因出在哪&#xff0c;害的我费了好多时间调试 &#xff0c;百度上也找了各个解决方法&#xff0c;有说使…

electron学习和新建窗口

首先我们要先下载electron npm install --save-dev electron 建立入口文件main.js 新建一个入口文件 main.js&#xff0c;然后导入eletron新建一个窗口。 const { app, BrowserWindow, ipcMain } require("electron"); const path require("path");func…

MacBook的nginx出现13: Permission denied 的问题分析和解决办法

同样的项目代码&#xff0c;电脑从Windows更换到了MacBook&#xff0c;发现网站的样式都没有了&#xff0c;直接访问CSS文件 http://crm.ms-test.cc/toolstatic/css/bootstrap.min.css 发现无法访问。查看Nginx错误日志&#xff1a; 说明是nginx没有权限访问这个CSS文件&#…

HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 解决了 HTTP 哪些问题? HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险: 窃听风险&#xff0c;比如通信链路上可以获取通信内容&#xff0c;用户号容易没。篡改风险&#xff0c;比如…

防御保护---VPN

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.VPN概述 VPN的基本原理是在原有的公共网络之上&#xff0c;建立一个使用加密技术保护数据传输的私有网络。通过VPN&#xff0c;用户可以在不同的地点之间建立起安全的连接&#xff0c;实现远…

【Crypto | CTF】BUUCTF RSA2

天命&#xff1a;密码学越来越难了&#xff0c;看别人笔记都不知道写啥 天命&#xff1a;莫慌&#xff0c;虽然我不会推演法&#xff0c;但我可以用归纳法 虽然我不知道解题的推演&#xff0c;但我可以背公式啊哈哈哈 虽然我不会这题&#xff0c;但是我也能做出来 公式我不知…

笔试题讲解(C语言进阶)

目录 前言 1、题目 2、答案 3、解析 结语 前言 “纸上得来终觉浅&#xff0c;绝知此事要躬行”。本篇通过对指针实际案例的分析&#xff0c;由浅入深&#xff0c;来加强我们对指针的理解。 1、题目 这是一道难题&#xff0c;小心哦。 #include <stdio.h> int main(…

蓝桥杯C++竞赛常用库函数介绍

文章目录 前言一、二分查找1. 二分查找的前提2.binary_search函数3.lower_bound函数和upper_bound函数4.蓝桥杯例题 二、最值查找1. min和max函数2.min_element和max_element函数3.nth_element函数4.蓝桥杯例题 三、排序1.sort函数2.sort自定义比较函数,或lambda表达式(匿名函数…