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 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
js实现幻灯片轮播图
Aug 14 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
由php if 想到的些问题
2008/03/22 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python代码中怎么换行
2020/06/17 Python
小型女装店的创业计划书
2014/01/09 职场文书
百度吧主申请感言
2014/01/12 职场文书
主管会计岗位责任制
2014/02/10 职场文书
cf搞笑广告词
2014/03/14 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
会计个人实习计划书
2014/08/15 职场文书
干部考察材料范文
2014/12/24 职场文书
员工辞退通知书
2015/04/17 职场文书
追悼会悼词大全
2015/06/23 职场文书
分家协议书范本
2016/03/22 职场文书