最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue前端整合Element Ui代码教程解析
时间:2022-07-06 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下Vue前端整合Element Ui代码教程解析,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1.安装Element Ui组件库
WIN+R输入CMD(必须以管理员身份运行)定位到vue项目生成位置后输入:
npm i element-ui -S
安装element-ui。
也可以在IDEA中打开Terminada进行安装;
同时在vue项目的package.json中依赖出现Element Ui:
dependencies": { "core-js": "^3.8.3", "element-ui": "^2.15.9", "vue": "^2.6.14", "vue-router": "^3.5.1" },
2.测试Element Ui是否整合成功
打开vue项目main.js文件引入Element Ui:
直接复制以下内容直接替换即可
import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false; // 设置控件大小为mini Vue.use(ElementUI,{ size: "mini" }); new Vue({ router, render: h => h(App) }).$mount('#app');
在Home.vue中添加一个按钮进行测试:
{{title}}
在IDEA的Terminal中输入
npm run serve启动vue项目,也可以通过CMD命令行(以管理员身份运行)启动;
启动成功后在浏览器中输入
http://localhost:8080/查看测试按钮:
Vue前端页面整合Element Ui成功! ! !
下一个: vue中按钮操作完刷新页面代码实现方法
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码