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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
手机端转换rem适应
Apr 01 Javascript
Javascript创建类和对象详解
May 31 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
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实现的随机广告显示代码
2007/06/14 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
python 读取二进制 显示图片案例
2020/04/24 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
数据库基础的一些面试题
2012/02/25 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
教师应聘个人求职信
2013/12/10 职场文书
学生检讨书如何写
2014/10/30 职场文书