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.mzph.cn/news/62897.shtml

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

相关文章

砍价活动制作秘籍,打造抢购风潮

砍价活动作为一种吸引用户参与、提高销售量的营销手段,已经成为了电商行业的热门选择。在如今竞争激烈的市场环境下,如何制作出成功的砍价活动,成为了每位电商从业者亟需解决的问题。在本文中,我们将为大家揭秘一种制作成功砍价活…

基于Thinkphp6框架全新UI的AI网址导航系统源码

2023全新UI的AI网址导航系统源码,基于thinkphp6框架开发的 AI 网址导航是一个非常实用的工具,它能够帮助用户方便地浏览和管理自己喜欢的网站。 相比于其他的 AI 网址导航,这个项目使用了更加友好和易用的 ThinkPHP 框架进行搭建,…

[管理与领导-60]:IT基层管理者 - 扩展技能 - 3 - 通过面试招到合适的人选

目录 前言: 一、招聘 1.1 什么是招聘 1.2 招聘 VS 招募 1.3 甄选 1.4 招聘中的重要原则 1.5 招聘的本质 1.6 人才匹配的维度 1.7 人员招聘中的误区 二、面试 2.1 何为面试 2.2 为什么面试 2.3 面试的注意事项 2.4 面试的误区 2.5 如何进行面试 前言…

ffmpeg把RTSP流分段录制成MP4,如果能把ffmpeg.exe改成ffmpeg.dll用,那音视频开发的难度直接就降一个维度啊

比如,原来我们要用ffmpeg录一段RTSP视频流转成MP4,我们有两种方案: 方案一:可以使用以下命令将rtsp流分段存储为mp4文件 ffmpeg -i rtsp://example.com/stream -vcodec copy -acodec aac -f segment -segment_time 3600 -reset_t…

springMVC之拦截器

文章目录 前言一、拦截器的配置二、拦截器的三个抽象方法三、多个拦截器的执行顺序总结 前言 拦截器 一、拦截器的配置 SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor SpringMVC的拦截器必须在SpringMVC的配置文件中进行配置&…

OpenCV(三):Mat类数据的读取

目录 1.Mat类矩阵的常用属性 2.Mat元素的读取 1.at方法读取Mat矩阵元素 at (int row,int col) 2.矩阵元素地址定位方式访问元素 3.Android jni demo 1.Mat类矩阵的常用属性 下面是一些Mat类的常用属性: rows: 返回Mat对象的行数。 cols: 返回Mat对象的列数。 …

uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u

项目引入了uview,并将uview所有模块指给uniapp全局变量uni uni.$u$u 在登录页面,或者APP.vue打印以下变量: this, uni, $u, vm, uni.$u, this.$u // this,$u,vm,uni, this.$u, uni.$u全局变量说明console.log(">>th…

Spring 如何解决循环依赖问题 - 三级缓存

1. 什么是循环依赖问题 ? 循环依赖问题是指对象与对象之间存在相互依赖关系,而且形成了一个闭环,导致两个或多个对象都无法准确的完成对象的创建和初始化。 两个对象间的循环依赖: 多个对象间的循环依赖 : 解决 Spring 中的循环…

ctfshow-web14

0x00 前言 CTF 加解密合集CTF Web合集 0x01 题目 0x02 Write Up 首先看到这个,swith,那么直接输入4,则会打印$url的值 然后访问一下 查看一下,发现完整的请求是http://c7ff9ed6-dccd-4d01-907a-f1c61c016c15.challenge.ctf.sho…

如何用VMware虚拟机连上Xshell

目录 前言废话1.1设置虚拟机设置1.2 设置虚拟网络编辑器方法一:方法二: 1.3 配置静态IP地址1.4 Xshell连接虚拟机2.1 解决可能出现的一些问题2.1.1 虚拟机Ping不通网络2.1.2 我可以Ping通百度了,但是宿主机和虚拟机互相Ping不通。2.1.3 更离谱…

苍穹外卖01-项目概述、环境搭建

项目概述、环境搭建 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示: 管理端-外卖商家使用用户端-点餐用户使用当我们完成该项目的学习,可以培养以下能力: 1. 软件开发整体介绍 作为一名软…

Python爬虫基础之正则表达式

目录 一、什么是正则表达式? 二、re.compile()编译函数 三、group()获取匹配结果函数 四、常用匹配规则 4.1匹配单个字符 4.2匹配前字符次数 4.3匹配原生字符串 4.4匹配字符串开头和结尾 4.5分组匹配 五、re.match()开头匹配函数 六、re.search()全文搜索…

JavaScript Web APIs -03 事件流、事件委托、其他事件(加载、滚动、尺寸)

Web APIs - 03 文章目录 Web APIs - 03事件流捕获和冒泡阻止冒泡 事件委托其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 进一步学习 事件进阶,实现更多交互的网页特效,结合事件流的特征优化事件执行的效率 掌握阻止事件冒泡的方法理解事…

【MySQL系列】索引的学习及理解

「前言」文章内容大致是MySQL索引的学习。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、索引概念二、从硬件角度理解2.1 磁盘2.2 结论 三、从软件角度理解四、共识五、索引的理解5.1 一个现象和结论5.2 对Page进行建模5.3 索引可以采用的数据结构5.…

opencv-人脸识别

对https://blog.csdn.net/weixin_46291251/article/details/117996591这哥们代码的一些修改 import cv2 import numpy as np import os import shutil import threading import tkinter as tk from PIL import Image, ImageTkchoice 0# 首先读取config文件,第一行…

多线程(额外扩展)(面试会用)

1 线程状态 1.1 状态介绍 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态。线程对象在不同的时期有不同的状态。那么Java中的线程存在哪几种状态呢?Java中的线程 状态被定义在了java.lang.Thread.State枚…

使用飞桨实现的第一个AI项目——波士顿的房价预测

part1.首先引入相应的函数库: 值得说明的地方: (1)首先,numpy是一个python库,主要用于提供线性代数中的矩阵或者多维数组的运算函数,利用import numpy as np引入numpy,并将np作为它的别名 part…

基于OFDM的水下图像传输通信系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 function [rx_img] func_TR(tx_img, num_path, pathdelays, pathgains, snr) rng(default); …

【C++】set和map

set和map 1. 预备知识2. set2.1 set的概念2.2 set的常见接口 3. multiset4. map4.1 map的概念4.2 map的常见接口 5. multimap6. 练习 1. 预备知识 set和map是关联式容器&#xff0c;里面存储的不是元素本身&#xff0c;存储的是<key,value>结构的键值对&#xff0c;比ve…

日本橙皮书数据库—《医疗用医药品质量情报集》

日本橙皮书是一份关于医疗用医药品质量情报的汇总报告&#xff0c;由日本厚生劳动省发布。它主要涵盖了药品的品质再评价信息&#xff0c;特别是针对特定历史阶段的产品&#xff0c;笔者总结信息如下&#xff1a; ①日本橙皮书数据库包含了一系列药品的详细信息&#xff0c;如…