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. P2698 [USACO12MAR]花盆Flowerpot 单调队列

    https://www.luogu.org/problemnew/show/P2698 警示 用数组写双端队列的话,记得le = 1, ri = 0:le<=ri表示队列非空 题意 求一个最小的 ...

  2. gym/102059 E

    gym/102059 待通过:A.D.G.J.M 已补过:E E:电路题,判断一个图是不是简单电路.不需要特殊的技巧,利用set存图,把度数为2的点都删掉,融入到一条边上即可. #include &l ...

  3. 2014 西安 The Problem Needs 3D Arrays

    The Problem Needs 3D Arrays 题意:给你n个数, 然后1-n的数, 然后要求按顺序选出m个数, 求 逆序数/m 个数的 最大值是多少. 题解:裸的最大密度子图.逆序的2个数建 ...

  4. 模板汇总——treap

    1. 旋转treap. 思想:一颗权值BST + 一颗 随机数 最小堆. BZOJ - 3224 代码: #include<bits/stdc++.h> using namespace s ...

  5. 关于斐波那契数列的一些恒等式 模板 牛客OI测试赛 A 斐波拉契

    牛客A 斐波拉契 链接:https://www.nowcoder.com/acm/contest/181/A来源:牛客网 设f[i]表示斐波那契数论的第i项 f[1]=1,f[2] =1,f[i] = ...

  6. CodeChef - QRECT Rectangle Query CDQ分治

    题目传送门 题解:现在需要维护的每次的询问矩形和前面插入的所有矩形有公共部分的个数. 我们试着直接去维护这个东西, 发现可能的情况太多,不好维护,所以我们维护每次询问的时候在当前矩阵个数下,有多少个矩 ...

  7. lightoj 1097 - Lucky Number(线段树)

    Lucky numbers are defined by a variation of the well-known sieve of Eratosthenes. Beginning with the ...

  8. java 中for循环中断的办法

    /* 中断for循环的办法: 1.break ***2.return是结束方法的,不是结束循环的. 3.标签的方法. 格式: 表签名:语句 运行结果:D:\test\day0413>java T ...

  9. Ubuntu系统添加用户权限

    一.首先创建一个新用户: sudo adduser hadoop 其次设置密码: sudo passwd hadoop 如果无法使用root密码,请输入如下命令: sudo passwd root 二 ...

  10. spring boot日志logback输出

    logback是spring boot的官方推荐日志. 1.在代码中使用logback日志: import org.slf4j.Logger; import org.slf4j.LoggerFacto ...