Vue学习二：安装element-ui组件库

已于 2022-04-21 18:08:26 修改
阅读量2.2k 收藏 4
点赞数 2
分类专栏： Cx前端精品专区 文章标签： element-ui vue
于 2022-04-21 10:29:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25223941/article/details/124315248
版权

上一章：搭建Vue环境

搭建完vue环境后，安装element-ui使用其组件库，提高开发效率。

1.打开cmd，cd到在项目目录下

        执行npm install element-ui，安装完成后，查看项目中的package.json文件，可以看到最新版本的"element-ui": "^2.15.8"，表示安装成功。

2.引入element-ui

        在main.js中添加如下代码        

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.引入成功后，就可以在vue文件中使用element-ui的组件。

        官网参考组件库：https://element.eleme.cn/#/zh-CN

此博客仅为记录如何安装element-ui，自我学习使用。具体详细操作，请到官网学习。

下一节接口请求axios：安装axios及使用

Cx_轩
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三步完成在vue2.x中安装element-ui
weixin_46353030的博客
03-22 1211
vue2.x element-ui这个是全局配置，后期再补充自动导入，可以看看官网的解释 在vue项目内的程序入口文件main.js 中引入element-ui及其样式文件 在页面入口文件App.vue中加入element-ui官网中的按钮代码测试一下 最后的效果： 完整的main.js文件： 注意 不同版本的vue对应的element组件库是不同的！
Vue2.0安装Element-ui
m0_59511468的博客
05-20 6065
1.在项目终端输入 npm i element-ui -S 如果想知道是否安装成功 2.随后在main.js里引入element组件 // 加载 element 组件库 import ElementUI from 'element-ui' // 加载 element 组件库的样式 import 'element-ui/lib/theme-chalk/index.css' // 全局注册 element 组件库 Vue.use(ElementUI) 然后去使用element .
Vue2与Element的下载，安装，使用
最新发布
努力不熬夜 ^_^的博客
05-10 474
Vue2与Element的下载，安装，使用
vue2安装使用element ui
qq_43336145的博客
07-28 695
Vue中使用element ui，前端快速开发，使用element组件
系列五、Vue2 安装element
仰望星空，脚踏实地！安全感是自己给的，努力才是一辈子的安全感。
05-19 769
是一套为开发者、设计师和产品经理准本的基于Vue2.0的桌面端组件库。
vue(30) : vue2安装element-ui
Lxinccode的博客
06-28 433
【代码】vue(30) : vue2安装element-ui。
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
vue 使用 element-ui 项目的一些工具方法、拓展自定义指令等 Custom Directives 对 element-ui 的一些组件做的拓展自定义指令工具 使用yarn包管理 提供指令： v-select-scroll: Select 组件监听滚动，以便做懒加载 v...
vue-elementUI:修改element-ui
03-23
Vue-elementUI是一个基于Vue.js和Element UI的项目，Element UI是一个流行的前端组件库，它提供了丰富的界面元素，如表格、按钮、提示等，用于快速构建美观的企业级Web应用。在"vue-elementUI:修改element-ui源码"这...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在Vue.js开发中，Element UI 是一款非常流行的前端UI库，它提供了丰富的组件，使得开发者能够快速构建美观的用户界面。在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-...
element-ui-reading-source:阅读element-ui框架组件源码笔记
03-23
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格、按钮、弹窗等，被广泛应用于Web应用开发中。阅读其源码有助于深入了解Vue.js组件化开发模式，以及Element-UI如何实现优雅的交互和响应...
egrid:对 element-ui table 组件的封装
05-10
基于 Element-UI Table 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。 element 升级到了 2.0 了， 不用担心可以无缝升级的~ 文档 开发 npm run dev npm run build npm run doc 使用 安装 Element： ...
vue2/3导入安装elementUi
TurkeyZ的博客
02-28 262
vue2/3导入安装elementUi
element-ui 在vue2 安装和按需加载
weixinmingwo的博客
03-05 468
下载 : npm i element-ui -S 按需引入要下载 babel-plugin-component 下载: npm install babel-plugin-component -D 修改 babel.config.js 文件 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", {
vue项目安装Elementui组件库和axios
qq_56514727的博客
11-26 182
2、安装 在vscode的项目终端输入 等待下载完成即可 二、axios 三、vue路由 在使用vue ui创建时，可以直接勾选路由选项 勾选后就不需要另外安装
vue安装及element安装
Fancy_Q的博客
08-14 504
1.安装vue：npm install vue 2.全局安装vue-cli：npm install --global vue-cli 之后创建新项目只需一下步骤： 3.创建webpack模板项目：vue init webpack project（文件名） 4.进入cd到项目文件，安装依赖包：npm install 到此为止：vue-cli脚手架完成 npm run dev 安装elem...
vue中安装和使用ElementUI
庭落
09-22 882
安装 命令行cnpm install element-ui --save 完整引入 在main.js中写入import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 按需引入 下载失败 放弃这个方法 然后复制官方文档直接用 ...
Vue2项目配置element组件库
weixin_45786889的博客
06-30 575
在上一篇博客中介绍了Vue2项目初始化的方法，接下来将在项目中引入element组件库。 1.如果没有安装element组件库依赖的话，请在控制台执行以下代码 npm install element-ui 2.打开main.js文件 3.引入element-ui组件库与样式 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' 全局挂载element组件 Vue.use(ElementUI)
vue安装 搭建 以及在项目中安装elementui
热门推荐
xiasohuai的博客
06-03 2万+
vue安装步骤在安装vue之前，先确保node和npm是否安装。如果安装ok，那么接下来安装vue1.npm install vue (安装vue)2.npm install --global vue-cli （安装vue-cli）因为npm是国外的，使用起来比较慢，使安装vue会出现报错，那么你可以试着 安装 淘宝镜像：1.npm install -g cnpm --registry...
Vue2 引入使用ElementUI详解
蓑笠翁
03-17 2821
vue2引入elementUI，vue2按需引入elementUI详解
vue2重装安装element-ui
10-16
好的，以下是安装element-ui的步骤： 1. 首先确保你已经安装了vue-cli，如果没有安装可以使用以下命令进行安装： ``` npm install -g vue-cli ``` 2. 创建一个新的vue项目： ``` vue init webpack my-project ``` 3. 进入到项目目录并安装element-ui： ``` cd my-project npm install element-ui -S ``` 4. 在main.js中引入element-ui并注册： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 5. 在组件中使用element-ui的组件： ``` <template> <div> <el-button>按钮</el-button> </div> </template> <script> export default { name: 'MyComponent' } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值