Vue脚手架中安装ElementUi

目录

ElementUi简介: 

ElementUi下载:

npm 安装:

引入ElementUi:

测试是否引入成功:


Element-ui官网:组件 | Element

ElementUi简介: 

ElementUi,是由国内的饿了么团队开发并开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

简单的说ElementUi是一个基于Vue的Ui框架,适用于PC端,是当今最流行、最常用的ui。

ElementUi下载:

下载的前提要有node.js,之前那章博客发过。

先以管理员方式打开《命令提示符》,就是win+R,填cmd那个东西。

npm 安装:

使用vue-cli-plugin-element插件。此插件可以按需安装,也可以全部安装。

// 在项目的根目录下,执行命令
vue add element

 输入完之后会有出现这些命令:

第一个选择:

我们选择第一个

 第二个选择:

我们输入n

第三个选择:

我们选择第一个

判断是否成功安装上:

如果你目录中多了此目录,并且有个element.js文件就证明安装上了。

引入ElementUi:

在工程中的src目录下的main.js中引入ElementUi。

 

在main.js中引入代码:

下面代码中有些代码是自带的,可以直接复制这个代码,直接覆盖你的代码。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import './plugins/element.js'Vue.config.productionTip = falseVue.use(ElementUI)new Vue({router,store,render: h => h(App)
}).$mount('#app')

测试是否引入成功:

随便在目录中找一个组件,添加个element-ui的样式,试一下能不能出来

这里我是添加了一个最基础的按钮样式,测试成功。 

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBootWeb案例 Part3

目录 1. 新增员工 1.1 需求 1.2 接口文档 1.3 思路分析 PostMapping RequestBody //把前端传递的JSON数据填充到实体类中 1.4 功能开发 1.5 功能测试 1.6 前后端联调 2. 文件上传 2.1 文件上传简介 Spring中提供了一个API:MultipartFile,使…

设计模式——装饰器模式

装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。 装饰器模式通过将对象包装在装饰器类中,以便动态…

5G NR:PRACH时域资源

PRACH occasion时域位置由高层参数RACH-ConfigGeneric->prach-ConfigurationIndex指示,根据小区不同的频域和模式,38.211的第6.3.3节中给出了prach-ConfigurationIndex所对应的表格。 小区频段为FR1,FDD模式(paired频谱)/SUL,…

W6100-EVB-PICO进行UDP组播数据回环测试(九)

前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试,那么本章我们进行UDP组播数据回环测试。 什么是UDP组播? 组播是主机间一对多的通讯模式, 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…

死信队列理解与使用

一、简介 在rabbitMQ中常用的交换机有三种,直连交换机、广播交换机、主题交换机; 直连交换机中队列与交换机需要约定好routingKey去进行绑定; 广播交换机并不需要routingKey绑定,只需队列与交换机绑定即可; 主题交换机最大的特…

uniapp启动微信小程序开发者工具报错Enable IDE Service (y/N) 

下载安装好微信小程序开发者路径 配置好启动路径后 报错[微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C 解决办法 因为微信开发者工具的服务端口号没有打开

续1-续3《你的医书是假的!批评付施威的《DDD诊所——聚合过大综合症》

DDD领域驱动设计批评文集 “软件方法建模师”不再考查基础题 《软件方法》各章合集 我写了一篇文章,批评付施威的《DDD诊所——聚合过大综合症》(以下简称《DDD诊所》),文章是《你的医书是假的!批评付施威的《DDD诊…

微信小程序隐私协议接入

自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。 相关公告见:关于小程序隐私保…

光伏+旅游景区

传统化石燃料可开发量逐渐减少,并且对环境造成的危害日益突出。全世界都把目光投向了可再生能源,希望可再生能源能够改变人类的能源结构。丰富的太阳能取之不尽、用之不竭,同时对环境没有影响,光伏发电是近些年来发展最快&#xf…

小研究 - Java虚拟机性能及关键技术分析

利用specJVM98和Java Grande Forum Benchmark suite Benchmark集合对SJVM、IntelORP,Kaffe3种Java虚拟机进行系统测试。在对测试结果进行系统分析的基础上,比较了不同JVM实现对性能的影响和JVM中关键模块对JVM性能的影响,并提出了提高JVM性能的一些展望。…

推荐一款好用的开源视频播放器(免费无广告)

mpv是一个自由开源的媒体播放器,它支持多种音频和视频格式,并且具有高度可定制性。mpv的设计理念是简洁、高效和功能强大。 软件特点: 1. 开源、跨平台。可以在Windows\Linux\MacOS\BSD等系统上使用,完全免费无广告。Windows版解压…

【springboot】springboot定时任务:

文章目录 一、文档:二、案例: 一、文档: 【cron表达式在线生成器】https://cron.qqe2.com/ 二、案例: EnableScheduling //开启任务调度package com.sky.task;import com.sky.entity.Orders; import com.sky.mapper.OrderMapper; …