vue学习笔记(三)- vue2.x引入Element-ui

vue学习笔记(三)- vue2.x引入Element-ui

webpack+vue2.x+element-ui

作者:狐狸家的鱼

本文链接:vue2.x引入Element-ui

GitHub:sueRimn

 

 

1、新建项目

vue init webpack vue-elementUi //vue-elementUi是项目名
cd vue-elementUi //进入项目文件
npm install //安装依赖
npm run dev //启动项目

2、安装Loader模块

1 npm install style-loader -D
2 npm install css-loader -D
3 npm install file-loader -D

3、安装Element-ui框架

npm install element-ui --save

4、修改webpack.base.conf.js

 

在配置里添加这些代码:

{
    test: /\\\\\\\\.css$/,
    loader: "style!css"
},
{
    test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
    loader: "file"
}

5、引入Element-ui

打开项目,找到src/main.js目录,添加如下代码

import Element from 'element-ui 
import 'element-ui/lib/theme-chalk/index.css' 

Vue.use(Element)

6、测试

<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>

 

 

 

posted @ 2019-02-21 14:02 狐狸家的鱼 阅读(...) 评论(...) 编辑 收藏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值