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

目录
  • Vue前端整合Element Ui
    • 1.安装Element Ui组件库
    • 2.测试Element Ui是否整合成功

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

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <h1>{{title}}</h1>
    <el-button type="primary>{{message}}</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data(){

    return{
      title:"cjw-demo",
      message: "测试按钮"
    }

  }

}
</script>

在IDEA的Terminal中输入

npm run serve

启动vue项目，也可以通过CMD命令行（以管理员身份运行）启动；

启动成功后在浏览器中输入

 http://localhost:8080/

查看测试按钮：

Vue前端页面整合Element Ui成功！ ！ ！

到此这篇关于Vue前端整合Element Ui的文章就介绍到这了,更多相关Vue整合Element Ui内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue与element-ui整合方式

    详解Vue与element-ui整合方式

    目录 一.Vue与element-ui整合 1.安装element-ui: 2.引入ElementUI: 3.按需引入ElementUI元素即可 4.使用组件渲染UI效果 一.Vue与element-ui整合 element-ui官网介绍很详细,这里摘抄官网的融入方式: 1.安装element-ui: npm i element-ui -S 2.引入ElementUI: 分为全部引入和部分引入,因为全部引入文件体积太大,这里直接部分引入:按需引入,需要借助一个插件,安装插件: npm insta

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • Vue前端整合Element Ui的教程详解

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

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • 在vue中安装使用vux的教程详解

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一些组件,用起来还是比较方便的,因为自己比较菜吧,所以有很多东西还是不太深入了解...比如对vux自带样式的修改..希望有大牛看到的话也可以多多指点... 今天就记录一下vux的安装使用吧...... 首先自己要先新建一个vue项目,cmd进入到项目目录下,进行安装 1.在项目目录下安装vux(也可以

  • vue cli安装使用less的教程详解

    vue cli安装使用less的教程详解

    vue-cli构建的项目默认是不支持less的,需要自己添加依赖 1.安装less和less-loader ,在项目目录下运行如下命令 npm install less less-loader --save-dev 2.安装成功后,打开build/webpack.base.conf.js ,在 module.exports = 的对象的module.rules 后面添加一段: module.exports = { // 此处省略无数行,已有的的其他的内容 module: { rules: [ /

  • tomcat9 下载安装和配置+整合到eclipse的教程详解

    tomcat 官网 tomcat 相当于本地服务器,可以打开网页 下载到设置的位置,到此下载完成. 安装 1.解压下载的安装包 2.环境变量的配置,选择我的电脑,右键依次 属性–>高级–>环境变量–>系统变量,添加对CATALINA_HOME变量 对Path系统变量添加变量值 %CATALINA_HOME%\bin;%CATALINA_HOME%\lib\servlet-api.jar;%CATALINA_HOME%\lib\jsp-api.jar; 3.添加用户,进入D:\tomcat

  • Vue起步(无cli)的啊教程详解

    一丶项目配置 1. 创建身份证文件 2. 安装webpack webpack-cli  webpack-dev-server(全局)工具 3. 安装,配置vue vue-loader  vue-template-compiler  less-loader css-loader  style-loader  less 4. 构建项目目录,更改配置文件 ./index.html //页面文件 <div id="app"></div> <script src=&

  • vue前端信息详情页模板梳理详解

    本文实例为大家分享了vue前端信息详情页模板的梳理,供大家参考,具体内容如下 前言: 自己总结方便自己用的,觉得有用可以参考使用,欢迎留言提出改进意见. 1.HTML部分: <template xmlns:el-form-item="http://www.w3.org/1999/xhtml">   <el-form ref="form" :model="form" :rules="rules" label-w

  • dubbo整合springboot新手入门教程详解

    dubbo整合springboot新手入门教程详解

    前言 目前互联网公司,大部分项目都是基于分布式,一个项目被拆分成几个小项目,这些小项目会分别部署在不同的计算机上面,这个叫做微服务.当一台计算机的程序需要调用另一台计算机代码的时候,就涉及远程调用.此时dubbo就粉末登场了. 搭建工程 idea新建工程后,删除src文件夹,然后在gradle文件中输入 buildscript { repositories { maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }

  • vue前端框架—Mint UI详解（更适用于移动端）

    一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

随机推荐