您现在的位置是：网站首页> 编程资料编程资料

Vue前端整合Element Ui的教程详解_vue.js_

2023-05-24 475人已围观

简介 Vue前端整合Element Ui的教程详解_vue.js_

Vue前端整合Element Ui

本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。

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中添加一个按钮进行测试：