Element的使用
Element的使用
1. node.js的安装
官方网址:https://nodejs.org/en/
打开命令行(cmd)检测版本信息:分别输入node -v npm -v
2. vue vue-cli脚手架工具安装
2.1 输入命令:npm install -g cnpm --registry=http://registry.npm.taobao.org
下载淘宝镜像,用cnpm来替代npm,加速我们接下来依赖环境的下载速度,使用npm 跳过此命令
2.2 全局安装 vue-cli : npm install --global vue-cli
2.3 在电脑创建一个目录来保存vue项目,并进入到该目录下,新建项目
我的项目在E盘 输入 e:
跳转到新建目录下 cd element
创建一个项目:输入命令:vue init webpack elementui
elementui 为项目名,你可以自己随便起名,但要注意命名规则
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息等等,
对于有些不明白或者不想填的信息可以一直按回车去填写。
接着去看项目是否创建成功:
2.4 缺少依赖文件
进入到项目中,安装项目的依赖
输入命令:cd elementui
输入命令:cnpm install 没有下载淘宝镜像请执行 npm install
如果安装过程无反应或者意外中断,可以关闭cmd重新打开,重复执行 cnpm install 命令。
安装完成:进入项目目录下可以看到elementui文件夹中多出一个node_modules文件夹
vue-cli脚手架安装成功!!!
3.安装element ui
输入命令:npm install element-ui -S
4.引入 Element
你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
4.1 完整引入
elementui/src/main.js
在 main.js 中写入以下内容:
import Vue from 'vue'
import App from './App'
import router from './router'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({el: '#app',router,components: { App },template: '<App/>'
})
以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。
4.2 按需引入
请参考 https://element.faas.ele.me/#/zh-CN/component/quickstart
4.3 全局安装「主题生成工具」:npm i element-theme -g
自定义主题 请参考https://element.faas.ele.me/#/zh-CN/component/custom-theme
5. 运行
5.1 在components下新建一个vue文件 demo.vue 页面
在 https://element.faas.ele.me/#/zh-CN/component/button element官网中复制一段代码
将以下模板复制到新建的vue页面:
<template><div><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</template>
<script>export default {name: 'demo',data() {return {}}}
</script>
<style scoped>.el-row {margin-bottom: 20px;}
</style>
5.2 将新建的vue页面注册到路由管理当中:
打开router下面的Index.js文件,修改处为添加内容
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 修改处
import demo from '@/components/demo'
// 修改处
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},// 修改处{path: '/demo',name: 'demo',component: demo},// 修改处]
})
5.3 删除App.vue当中多余的数据:
因为index.html入口是先进入App.vue当中然后通过router来找到各个vue页面的
App.vue相当于总的vue页面的入口
将 <img src="./assets/logo.png">
这一行代码删除
5.4 执行 npm run dev
用浏览器访问:http://localhost:8080/#/demo 看效果
想查看其他效果请参考 https://element.faas.ele.me/#/zh-CN/component/layout
Element的使用相关推荐
- Cannot locate BeanDefinitionParser for element [scoped-proxy]
指定使用 CGLIB 而不使用 JDK 生成代理对象:注意:此两个标签必须同时出现,不然会报:Cannot locate BeanDefinitionParser for element [scope ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
- 【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
- 75. Find Peak Element 【medium】
75. Find Peak Element [medium] There is an integer array which has the following features: The numbe ...
- Element el-switch 组件样式修改 将文字显示到组件内
Element el-switch 现在的样式无法将文字显示到组件内 ,需要自己修改样式.具体如下 <el-switch:disabled="s==item.select.length ...
- 关于element的select多选选择器,数据回显的问题
关于element的select多选,数据回显的问题 在工作中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显.在网上 ...
- Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
- 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue...
原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue [源码下载] 背水一战 ...
- XSD标准架构-----xsd:element 元素详解
声明一个元素. <elementabstract = Boolean : falseblock = (#all | List of (extension | restriction | subs ...
最新文章
- pthread_cond_wait()函数的详解
- Vim 自动文件头注释与模板定义
- SQLSERVER DISTINCT的反例
- array.tolist_在Python中使用array.tolist()将数组转换为列表
- 前端学习(1873)vue之电商管理系统电商系统之实现退出功能
- php 查询cpu使用率,php获取CPU使用情况的代码
- jQuery实现文字左右收缩效果示例
- matlab怎么计算行列式,matlab一元线性回归方程的计算和检验/用四种方法计算行列式...
- CentOS 7安装/卸载Redis,配置service服务管理
- Blue Coat推移动设备安全(MDS)服务
- 计算机启动黑屏时间很长,电脑开机黑屏时间长怎么办?[多图]
- 为什么要预测、优化工业生产中的问题呢?
- 【STL】11 list容器操作
- 淘宝CDN架构全解析
- IMU(Inertial measurement unit)
- Crx搜搜 - 一个牛X的扩展商店
- BPSK信号产生(二)--载波调制
- 免费录屏软件之OBS Studio
- 群辉通过Docker搭建Redis集群
- php behaviors,在PHP的Yii框架中使用行为Behaviors的方法