使用ElementUI组件步骤

1 第一步:初始化一个项目

vue init webpack-simple demo     // 创建一个项目

cnpm install  // 根据package.json文件把相应的依赖都安装上

cnpm install element-ui -S    // 安装element-ui组件库 生成依赖

npm run dev    // 可以运行一下

2 引入element-ui组件

注意:webpack-simple这个模板中默认是没有style-loader模块的,所以还需要安装此模块

cnpm install style-loader  -D

同时还需要配置一下 webpack.config.js文件 否则会报错的

// 为字体文件指定loader

{

test: /\.(eot|svg|ttf|woff|woff2)$/,

loader: 'file-loader'

}



再运行 一切就都ok了

原文地址:http://blog.51cto.com/11871779/2135833

时间: 2024-11-13 09:35:07

使用ElementUI组件步骤的相关文章

vueJs引入elementUI组件,运行时出现ERROR

vueJs引入elementUI组件,运行时出现ERROR:ERROR Failed to compile with 1 errors This dependency was not found: * element-ui/lib/theme-default/index.css in ./src/main.js To install it, you can run: npm install --save element-ui/lib/theme-default/inde解决方法:index.cs

Element-ui组件库upload导出Excel表格

Element-ui组件库upload导出Excel表格 // 上传excel upload() { this.$refs.upload.submit(); //调用upload中自定义的方法 }, // 导入excel学生列表 uploadFile(item) { //:http-request自定义方法 const form = new FormData(); form.append("token", this.token); form.append("file"

vue Element-UI组件

一.UI组件 目的: 提高开发效率, 别人提供好一切, 拿过来直接用饿了么团队开源一个基于vue组件库 Element-UI ==> pc端 文档: http://element-cn.eleme.io/#/zh-CN/component/installation 二.安装模板 $ vue init webpack element-demo 1.安装element-ui $ npm install element-ui -save // 简写 // i ==> install // S ==&

elementUi——组件函数钩子自带参数,不能添加参数问题

在element-ui中的组件函数钩子一般都是自带参数如: //上传组件 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove&quo

vue封装组件,类似elementUI组件库打包发布到npm上

封装vue组件库的两种方法和形式: 一:是建立一个webpack-simple 项目 二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉 下面分别介绍两种用法: 一: 1.首先先建立一个vue项目: 通过vue init webpack-simple,新建项目目录如下: 箭头指的是在项目打包后产生的文件(打包命令npm run build ) 2.在src下新建一个目录用来存放组件源码: 然后写封装的组件,比如radios/radio.vu

Vue项目引进ElementUI组件

环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli

elementui 组件解释

Pagination, // 分页 Dialog // 对话框 Autocomplete, // 下拉框 百度式 输入内容自动显示的那种 Dropdown, // 下拉菜单 DropdownMenu, // 下拉菜单子项 详见官方文档 DropdownItem, // 类似于ul>li Menu, // 导航菜单 Submenu, // 导航菜单 MenuItem, // MenuItemGroup, //菜单分组 Input, // InputNumber, // 计数器,类似淘宝京东添加商品

elementUi 组件--el-table

[需求]在element中,将表格中的数据进行处理,然后渲染出来.例如,将数据保留小数点后两位显示. [知识点]formatter:用来格式化内容 [分析]在element 的table中,实现的过程是,数据需要绑定在 :data="tableData" 中,然后通过prop读取tableData中的key,这样一列的数据即可显示出来.现在需要对返回的数据进行格式化,可以用formatter属性,例如在"手续费"中,需要对数据进行保留两位小数,通过调用handelF

elementui组件table表,同时合并列合并行的解决办法

项目需要实现每三行合并两行,然后每三行合并三列,下图这种效果: 代码: el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"> </el-table