Vue引入elementUI组件

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量4.1k 收藏 11
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44763569/article/details/90444899
版权
本文介绍了在Vue项目中集成ElementUI的详细步骤，包括安装node.js环境，使用淘宝npm镜像，安装vue-cli脚手架，初始化Vue项目，解决安装过程中的问题，以及在组件和样式文件中引入ElementUI。
摘要由CSDN通过智能技术生成

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。

中文文档：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

图片.png

1：安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

image

2：查看node的版本号

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

最低0.47元/天 解锁文章
前端王小婷
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ElementUI-Components-Dashboard:更方便的查看 ElementUI 组件 Better view for ElementUI Components :rainbow:
05-22
Element UI Components Dashboard 为了更方便的查看/找组件、API。 安装/Install 浏览器安装扩展 扩展中安装脚本 之后访问 官网体验。 Screenshots 预览回滚：,
Vue项目全局安装引入ElementUI
weixin_46669795的博客
09-06 2099
安装命令：npm i element-ui -S 在终端窗口输入安装命令 在main.js中引入Element import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI) 引入之后，在原有的HelloWorld.vue页面加入一个Element的按钮，测试一下。 主要按钮 成功按钮 说明Element组件已经成功引入了 ...
Element-UI详解
最新发布
科技追踪者的专栏
05-22 4629
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
在vue中引入elementui
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-06 277
vue项目中引入elementui
Vue如何引入ElementUI进行使用
小宝儿的学习之路
08-12 1421
下载ElementUI npm install --save element-ui 按需引入ElementUI 哟时候只需要引入ElementUI中的几个组件，全局引入会增加项目的体积，所以按需引入更合适 在mian.js中引入并注册组件 import {Message} from 'element-ui' 在main.js注册，这里是挂在Vue圆形上的 Vue.prototype.$message = Message; 使用 <template> <div i
从vue到elementUI项目（一）
孤独的糖三角
09-07 1817
文章目录Vue全家桶各部分核心知识详解构建vue项目的利器—脚手架vue-cli3详解安装node安装node创建项目CLI服务启动项目测试精简项目vue中组件间传值常用的几种方式(上)vue中组件间传值常用的几种方式(下)玩转单页面应用的控制中心—vue-router路由的基本配置路由的跳转动态路由嵌套路路由导航守卫路由懒加载状态管理中心—vuex的基础用法状态管理中心—vuex的高级用法参考链接 Vue全家桶各部分核心知识详解 构建vue项目的利器—脚手架vue-cli3详解 安装node vue-cl
详解如何在vue项目中引入elementUI组件
08-28
Vue项目中引入ElementUI组件详解 ElementUI是一个基于Vue的前端组件库，提供了丰富的UI组件，帮助开发者快速构建高质量的Web应用程序。本文将详细介绍如何在Vue项目中引入ElementUI组件，实现快速构建美观的Web应用...
利用vue+elementUI实现部分引入组件的方法详解
08-28
以下是如何利用vue+elementUI实现部分引入组件的详细步骤。 首先，确保你已经安装了vue-cli，这是一个用于快速搭建Vue项目的命令行工具。如果没有，可以通过`npm install -g vue-cli`全局安装。接着，创建一个新的...
Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
07-12
在本项目中，我们结合了Vue.js与ElementUI组件库，构建了一个功能丰富的Web工程，旨在帮助开发者更好地理解和应用这些技术。 首先，Vue.js 提供了响应式的数据绑定和组件化开发模式，使得开发者可以快速地构建用户...
vue项目创建并引入饿了么elementUI组件的步骤
10-17
主要介绍了vue项目创建并引入饿了么elementUI组件的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
Vue中正确使用Element-UI组件的方法实例
01-18
一、CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css> <!-- 引入组件库 --> [removed][removed] 二、npm安装 1、打开终端（开发工具中打开或（win+r）后输入cmd进入） 2、进入到对
【VUE】4、VUE项目中引入Element-UI
热门推荐
Asurplus
04-02 8万+
一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率 Efficiency 简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别
按需引入element-ui
m0_61205772的博客
06-25 501
【代码】按需引入element-ui。
Vue开发实例目录总索引
编程界明世隐的博客
12-20 1万+
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ >即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！
vue中引入element-ui的方法
qq_36507046的博客
08-03 2331
vue中引入element-ui的方法
（5）vue.js 基础语法—el选项
Java田根旺
01-24 1536
一、el选项介绍 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。 • 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。 • 代表 MVVM 中的 View 层（视图）。 • 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例，但不能为 html 或 body。 常见报错：Uncaught ReferenceError: Vue is not defined。 该报错表示vue.js没有引入或者没有引入成功。 解决方法：检查vue.js文件是否
Vue项目引入引入ElementUI
anndy_的专栏
10-17 1万+
目录1、安装ElementUI2、在main.js中引入elementUI3、测试 ElementUI框架官网地址：https://element.eleme.cn/#/zh-CN/component/installation 1、安装ElementUI 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S i : 安装指令，全拼：install -S :生产环境，全拼：--save -D :开发环境，全拼：--save--dev -O
从新建vue项目到引入组件Element流程
Xiaosang's blog
02-27 5万+
从新建vue项目到引入组件Element 以及Error when rendering component报错解决 一、新建项目 1.打开cmd，运行：vue init webpack Vue-Demo 2.运行：cd Vue-Demo 进入这一级 3.运行：npm install 4.运行：npm run dev 如果浏览器打开之后，没有加载出页面，说明本地的8080 端口被占用，需要修改一下配置文件 config/index.js
vue引入elementui
10-12
在Vue中引入ElementUI可以按照以下步骤进行： 1. 首先，使用npm或yarn安装ElementUI。可以在终端中运行以下命令进行安装： ```bash npm install element-ui ``` 或 ```bash yarn add element-ui ``` 2. 在Vue项目的入口文件（通常是main.js）中，导入ElementUI的样式和组件。可以按照以下方式导入： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 注意，这里导入了ElementUI的样式文件，确保你的项目已经配置了相应的CSS加载器。 3. 现在你就可以在Vue组件中使用ElementUI提供的组件了。例如，在你的组件模板中可以这样使用一个按钮： ```vue <template> <el-button type="primary">按钮</el-button> </template> ``` 以上是在Vue中引入ElementUI的基本步骤。请确保已经正确设置了Vue项目，并且已经安装了npm或yarn。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值