element的安装

一.认识及安装

element是基于vue2.0的桌面组件库.

安装前提:node版本大于6.0

可以使用三种方法使用element

1.用cdn引入样式和组件库直接进行开发

<!-- 引入样式 -->

<linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>

2.用官方提供的快速开发模板element-starter

(1)安装npm

         在https://nodejs.org/en/安装node.js,给node配置环境变量

安装完node.js就自带了npm

(2)因为npm下载慢,运行

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 cnpm(gzip 压缩支持) 命令行工具代替默认的 npm

以后执行npm时用cnpm就行了

(3)创建一个工作目录,打开git bash,git的使用详见另一篇文档 http://blog.youkuaiyun.com/qq_24664619/article/details/78518488

执行git clone https://github.com/ElementUI/element-starter------------------------->这时文件夹中出现了element-starter------------------>cd element-starter---------------->

执行cnpm install,执行完element-starter文件夹会出现node-modules---------------->执行 cnpm run dev或者cnpm run build

(4)在浏览器中输入http://127.0.0.1:8080显示

搭建成功!现在可以修改app.vue进行练习了

3.搭建vue和element的开发环境

(1)(2)详见2中(1)(2)

(3)打开cmd,执行

> cnpm i -g vue-cli

> mkdir my-project && cd my-project

> vue init webpack

> cnpm i && npm i element-ui

搭建完成后执行npm run dev启动开发模式

(4)命令行中出现

(5)浏览器输入http://localhost:8080即可

二.使用很简单,看文档即可

文档地址:http://element-cn.eleme.io/#/zh-CN

更改app.vue中的东西即可