在 Vue-cli 创建的项目中引入 Element-UI

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 封装的组件了

时间: 2024-11-10 01:15:40

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

如何在vue项目中引入element ui组件

(1)安装element ui,即: npm i element-ui -S 然后在项目中的node_modules目录下查看是否有element-ui文件夹,如果有说明安装成功了: (2)引入element ui 在main.js中引入element ui,即: 1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI) [注意红色部分,以前是

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

根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save 2)在 webpack 入口页面 main.js   (E:\managerSys\manager-sys\src\main.js)中 添加 如下配置: import iView from 'iview'; // 导入组件库import 'iview/dist/styles/iview.css';

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

根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack 入口页面 main.js (E:\managerSys\manager-sys\src\main.js)中配置 import iView from 'iview'; // 导入组件库import 'iview/dist/styles/iview.css'; // 导入样式 Vue.use(iView

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

在Java Web项目中引入Mondrian多维分析框架

一,Mondrian简介 Mondrian是一个开源项目,一个用Java写成的OLAP引擎.它用MDX语言实现查询,从关系数据库(RDBMS)中读取数据.然后经过Java API以多维的方式对结果进行展示. Mondrian的使用方式同JDBC驱动类似.可以非常方便的与现有的Web项目集成. Mondrian OLAP 系统由四个层组成,可分为从最终用户到数据中心, 顺序为: 1表现层(the presentation layer) 2维度层(the dimensional layer) 3集合

项目中引入composer

众所周知,composer可以自定义加载插件库和依赖,它也是用PHP写的,怎样在自己的项目中引入并使用composer呢?. 1.新建一个项目,在项目的根目录创建composer.json文件,用过一个大型框架的同学可以发现,框架的根目录总是有一个此文件,对,发现了吗?记住了吗? 2.在composer.json文件里把下面的json格式复制进去 { "require": { } } 3.在项目根目录下创建vendor目录 4.此时执行命令composer update 注意:如果你直

在Vue框架中引入Element

文章会讲到如何在Vue框架中引入Element 那我们先来说一下Vue框架:Vue是渐进式,JavaScript框架.很多人不理解什么是渐进式,简单点讲就是易用.灵活.高效(没有太多限制) 这里介绍npm安装方式: 打开cmd,找到你Vue项目的路径 运行 npm i element-ui -S 然后在main.js里写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/

在Android项目中引入MuPdf

由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/pokeGame/archive/2011/06/02/2068575.html MuPDF介绍: Android 设备上轻量级.高品质的 PDF/XPS/CBZ 查看器. MuPDF 上的呈现器专为高质量的抗失真图像量身打造,它以像素级的精度高品质呈现文字和文字间的间距,从而获得最高级别的显示保真度,在设

在C++项目中引入Lua(AlphaGo使用的方案)

最近大火的AlphaGo,其中的deepmind已经开源,可以到github中下载https://github.com/deepmind/lab·,网上还有一个基于Python开源AlphaGo,那个不是google的.通过看deepmind源码,我们可以知AlphaGo使用的是C++和Lua方案.当然语言不是AlphaGo的重点,但还是说明了c++和Lua方案能够完成大型的项目.      从2009年开始在三维仿真项目中引入Lua,C++项目的开发效率得到了大幅度.在我们三维仿真这种对性能要