ElementUI安装与使用指南

• 数据库

Element官网-安装指南

提醒一下：下面实例讲解是在Mac系统演示的；

一、开发环境配置

电脑需要先安装好node.js和vue2或者vue3

  1. 安装Node.js

Node.js 中文网

安装node.js命令：brew install node

在这里插入图片描述

node.js安装完后，输入：node -v , npm -v 查看对应的版本

在这里插入图片描述

  1. 安装vue.js

vue.js官网

vue2

Vue CLI官网 ， Vue CLI是 Vue.js 开发的标准工具

提醒：Vue CLI 现已处于维护模式!

安装vue.js命令：npm install -g @vue/cli

在这里插入图片描述

vue 安装完后，输入：vue -V 或 vue –version 查看版本

在这里插入图片描述

二、vue创建工程

方式一：终端切换到自己电脑里保存工程的文件夹目录里, 然后输入：vue create 工程名称

在这里插入图片描述

方式二：终端里输入：vue ui

在这里插入图片描述

在浏览器里输入http://localhost:8000/project/select，打开Vue 项目管理器

在这里插入图片描述

点击在此创建新项目

在这里插入图片描述

点击下一步

在这里插入图片描述

点击下一步

在这里插入图片描述

点击创建项目

在这里插入图片描述

在这里插入图片描述

三、安装 element

终端里切换到工程目录，输入

在这里插入图片描述

四、查看element是否安装成功

方式一： 使用 Intellij IDEA 打开learnelementuispringboot

查看package.json

在这里插入图片描述

查看node_modules

在这里插入图片描述

方式二：使用HBuilderX打开learnelementuispringboot

查看package.json

在这里插入图片描述

查看node_modules

在这里插入图片描述

说明 element-ui已经安装好了

运行项目

方式一：Intellij IDEA

在这里插入图片描述

或者 Intellij IDEA 终端里输入：npm run serve

在这里插入图片描述

方式二：HBuilderX

在这里插入图片描述

项目启动成功页面：

在这里插入图片描述

点击下载learnelementuispringboot项目源码

learnelementuispringboot项目源码里有elementui使用实例

在这里插入图片描述

使用指南博客

  • ElementUI 组件：Layout布局（el-row、el-col）
  • ElementUI 组件Layout布局 el-row和el-col 简介
  • ElementUI 组件：Container 布局容器
  • ElementUI 组件：Container 布局容器实例
  • ElementUI组件：Button 按钮
  • ElementUI组件：Link 文字链接
  • ElementUI Form：Radio 单选框
  • ElementUI Form：Checkbox 多选框
  • ElementUI Form：Input 输入框
  • ElementUI Form：InputNumber 计数器
  • ElementUI Form：Select 选择器
  • ElementUI Form：Cascader 级联选择器
  • ElementUI Form：Switch 开关
  • ElementUI Form：Upload 上传
  • ElementUI Form：Form表单
  • ElementUI Data：Table 表格
  • Element UI+Spring Boot进行CRUD的实例

以上就是ElementUI安装与使用指南的全部内容讲解。

欢迎关注我的公众号，不定期推送优质的文章，

微信扫一扫下方二维码即可关注。

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/6cee042b8d.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐