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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
Angular 数据请求的实现方法
May 07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
JavaScript实现简单图片切换
Apr 29 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python中函数的用法实例教程
2014/09/08 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python默认参数调用方法解析
2020/02/09 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Pygame框架实现飞机大战
2020/08/07 Python
python中实现词云图的示例
2020/12/19 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
店长职务说明书
2014/02/04 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL