vue项目之UI插件：Element-UI的基本使用

Element-UI的基本使用

最新消息：

我们为新版的 vue-cli 准备了相应的 Element 插件，你可以用它们快速地搭建一个基于 Element 的项目。

插件安装完成后，会自动引入到main.js中

vue create my-app
cd my-app
vue add element

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。官网地址为： http://element-cn.eleme.io/#/zh-CN

1. 基于命令行方式手动安装(基于创建的项目：`vue-project`)

安装依赖包npm i element-ui –S
在main.js入口文件，导入 Element-UI 相关资源（全局引入）

// 导入组件库import ElementUI from 'element-ui';// 导入组件相关样式import 'element-ui/lib/theme-chalk/index.css';// 配置 Vue 插件Vue.use(ElementUI);

使用Element-UI

复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
运行：npm run serve

2. 基于图形化界面自动安装和配置`Element-UI`

在cmd窗口：运行vue ui命令，打开图形化界面

通过 Vue 项目管理器，进入具体的项目配置面板

点击插件 -> 添加插件，进入插件查询面板

搜索 vue-cli-plugin-element并安装

配置插件，实现按需导入import on demand，从而减少打包后项目的体积

任务–server–运行，提示：编译成功；则证明Element-UI安装成功
使用Element-UI
复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
任务--server--运行，点击启动app

3.按需引入element组件

在src/plugins/element.js，引入相关的组件

// 按需导入
import { Button,Form, FormItem,Input, Message,Dialog,MessageBox,Tag,Tree } from 'element-ui'// 注册全局组件
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItemon)
Vue.use(Input)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

使用方法：

message

登录成功：this.$message.error('登录失败')
登录失败：this.$message.success('登录成功')if(res.meta.status!==200) return this.$message.error(res.meta.msg)

MessageBox

如果用户确认删除，则返回值为字符串 confirm
如果用户取消删除，则返回值为字符串 cancel
console.log(confirmResult)

const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
}).catch(err=>err)if(confirmResult!=='confirm'){return this.$message.info('已取消删除')
}
console.log('确认了删除');

vue项目之UI插件：Element-UI的基本使用相关推荐

vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
【 Element UI 】—Element UI 的基本使用
[ Element UI ]-Element UI 的基本使用一.基于命令行的方式手动安装 npm 安装 npm i element-ui -S CDN 目前可以通过 unpkg.com/eleme ...
VsCode工具开发vue项目必装插件
VsCode工具开发vue项目必装插件目录 VsCode工具开发vue项目必装插件 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Sn ...
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools Vue-Devtools 插件是一个 Vue 项目的调试插件 Microsoft Edge 浏览器是 ...
vue项目防抖节流插件的使用
vue项目防抖节流插件的使用 lodash 安装 npm i --save lodash 在main.js引入 import _ from 'lodash' 使用: //防抖 //参数写在functi ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
win10快速搭建vue开发环境并使用element ui
1,环境 1.1 node.js安装下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 选安装目录进行安装(安装过程就是全程next,注意不要取消自动 ...
解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...

vue项目之UI插件：Element-UI的基本使用

Element-UI的基本使用

最新消息：

1. 基于命令行方式手动安装(基于创建的项目：`vue-project`)

2. 基于图形化界面自动安装和配置`Element-UI`

3.按需引入element组件

vue项目之UI插件：Element-UI的基本使用相关推荐

最新文章

热门文章

vue项目之UI插件：Element-UI的基本使用

Element-UI的基本使用

最新消息：

1. 基于命令行方式手动安装(基于创建的项目：vue-project)

2. 基于图形化界面自动安装和配置Element-UI

3.按需引入element组件

vue项目之UI插件：Element-UI的基本使用相关推荐

最新文章

热门文章

1. 基于命令行方式手动安装(基于创建的项目：`vue-project`)

2. 基于图形化界面自动安装和配置`Element-UI`