Element-UI 是饿了么前端团队退出了一套基于 vue.js 开发的 UI 组件库,在与 Vue-cli 创建的项目结合时,需要做以下配置:

1. 安装 loader 模块

cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D

2. 安装 Element-UI 模块

cnpm install element-ui -S

3. 修改 webpack.base.conf.js 的配置

{
test: /\.css$/,
loader: ‘style!css‘
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘file‘,
query: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
}
}

4. 在 main.js 中引入

import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-default/index.css‘
Vue.use(ElementUI)

配置完成后,就可以直接使用 Element-UI 封装的组件了

在 Vue-cli 创建的项目中引入 Element-UI的更多相关文章

  1. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  2. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  3. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  4. vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

  5. vue-cli创建的项目中引入第三方库报错'caller', 'calle', and 'arguments' properties may not be...

    本文链接:https://blog.csdn.net/Sophie_U/article/details/76223978 问题: 在vue的main.js中引入mui.min.js时,报错. 如上,单 ...

  6. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  7. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  8. vue cli3 创建的项目中eslint 配置 问题的解决

    1--   vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...

  9. php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...

随机推荐

  1. Mongodb操作2-windows系统安装数据库

    1.下载mongodb 本人提供的是64位的下载地址 百度云盘连接 :链接:https://pan.baidu.com/s/1fp6aB5rvLa9dD4q4YysIXQ 提取码:ekr2    并送 ...

  2. unicode的编码与解码

  3. Charles安装windows篇

    简介 Charles是一款非常好用的网络抓包工具,类似fiddle抓包工具,当然也可以理解为一款HTTP代理服务器.HTTP监视器.反向代理服务器等. 二.官网下载 地址:https://www.ch ...

  4. CodeBenchmark之压力测试详解

    CodeBenchmark是一款高性能可视化的并发测试组件,通过组件可以对任意逻辑代码或服务进行并发测试:组件最终通过可视化的方式来显示测试结果,在测试结果中可以看到具体的并发情况和处理延时的分布.组 ...

  5. 【LeetCode】22-生成括号

    22-生成括号 题目描述 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", ...

  6. 教程 —— 如何在自己的应用集成superset

    Superset 是apache的一个孵化项目,定位为一款现代的,准商用BI系统 superset Apache Superset (incubating) is a modern, enterpri ...

  7. [翻译] .NET Core 3.0 RC 1 发布

    原文: Announcing .NET Core 3.0 Release Candidate 1 今天,我们宣布推出 .NET Core 3.0 Release Candidate 1.就像 Prev ...

  8. C#中FileStream的对比以及使用方法

    场景 File与FileStream的区别 举例: 将读取文件比作是从A桶往B桶运水. 使用File就是整个用桶倒进去,使用FileStream就是使用水管慢慢输送. FileStream与Strea ...

  9. response中文乱码问题

    1.要确定I代码的编码格式为UTF-8 2.乱码原因:浏览器和服务器的编码格式不同: 服务器的默认编码为:ISO-8859-1,如果浏览器的编码不是ISO-8859-1,就会出现乱码: public ...

  10. 第二次实验报告:使用Packet Tracer分析应用层协议

    个人信息:      •  姓名:李微微       •  班级:计算1811       •  学号:201821121001 一.摘要 本文描述使用Packet Tracer,正确配置网络参数,抓 ...