vue 2.0项目中如何引入element-ui详解


Posted in Javascript onSeptember 06, 2017

前言

本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧。

一、新建项目

1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境);

2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

3.安装 vue-cli   

    1、cnpm install -g vue

    2、cnpm install -g vue-cli

4. 安装 webpack   cnpm install -g webpack

5.cd  你的运行目录

6.新建vue项目      vue init webpack vuedemo

7.进入项目目录     cd vuedemo

8.安装依赖        cnpm install

9.运行项目        cnpm run dev

10.发布项目       cnpm run build

注:mac电脑需要在安装淘宝镜像前执行: sudo chown -R $USER /usr/local

二、使用element-ui前需安装修改的配置:

1. 安装 loader 模块:

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

2. 安装 Element-UI 模块

cnpm install element-ui --save

3. 修改 webpack.base.conf.js 的配置,位置:如下图:

vue 2.0项目中如何引入element-ui详解

下面是需添加的代码:

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

三、引入Element,前面已经全局安装了element-ui,只需要在Vue项目中引入即可

 1、打开项目:src/main.js,添加下面三条

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

四、然后在.vue文件里就直接可以用了

例如:做一下修改,加入element-button按钮:

<template>
<div class="login">
 <form name = 'form' action="">
 <input id="username" type="text" placeholder="请输入手机号码或用户名" />
 <input id='pwd' type="password" placeholder="请输入密码" />
 <button onclick="login()">登录</button>
 </form>
 <div class="account">
 <p class="forget" style="float:right">忘记密码?</p>
 <div class="register">
  <span>还没有账号?</span>
  <a href="#" rel="external nofollow" >手机注册</a>
 </div>
 </div>
 <el-button>默认按钮</el-button>
 <el-button type="primary">主要按钮</el-button>
 <el-button type="text">文字按钮</el-button>
 </div>
</template>

五、成功后的截图:

vue 2.0项目中如何引入element-ui详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
微信小程序 video组件详解
Oct 25 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
JavaScrip数组删除特定元素的几种方法总结
Sep 06 #Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
JavaScript学习笔记之函数记忆
Sep 06 #Javascript
node.js实现的装饰者模式示例
Sep 06 #Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 #Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 #Javascript
You might like
php实现俄罗斯乘法实例
2015/03/07 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python中List.count()方法的使用教程
2015/05/20 Python
python获取外网ip地址的方法总结
2015/07/02 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python3中sys.argv的实例用法
2020/04/24 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
2014小学教师个人工作总结
2014/11/10 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
小时代观后感
2015/06/10 职场文书
退休教师追悼词
2015/06/23 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫