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

前言

本文主要介绍了关于在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 的配置,位置:如下图:

下面是需添加的代码:

 {
 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>

五、成功后的截图:

总结

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

时间: 2017-09-04

vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

Vue2.0 UI框架ElementUI使用方法详解

今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

详解从新建vue项目到引入组件Element的方法

本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

详解vue2.0的Element UI的表格table列时间戳格式化

这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

详解vue2.0模拟后台json数据

最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功. 1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 p

详解vue2.0+vue-video-player实现hls播放全过程

起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成.基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD.网易云视频.七牛云.阿里云 视频服务等).其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外.以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集.存储.转码.播放器等,并且在cdn和弹性扩容上都能得到最大保障. 准备 视频点播最少需要两样东西:流媒体服务.视频播放器. 因为这是

详解Vue2.0配置mint-ui踩过的那些坑

最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2

详解Vue2.0里过滤器容易踩到的坑

vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); }); function里第一个参数value默认为使用这个过滤器的data对象内的值,在本例中是msg的值'you are mine'. 坑1:第一个参数必须为自身的值,后面可

详解Vue2.0 事件派发与接收

由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口. 请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象 new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: n

详解Vue2.0之去掉组件click事件的native修饰

这个是在组件开发中遇到的问题,当时我在编写button的组件,模板是这样的: <template> <button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"> <span class="button-inner"

详解vue2.0脚手架的webpack 配置文件分析

前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介.安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server

详解Vue2.0组件的继承与扩展

前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

详解vue2.0监听属性的使用心得及搭配计算属性的使用

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type