官网:
http://element.eleme.io/#/zh-CN
一、安装
npm
npm i element-ui -S
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
二、Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">按钮</el-button>
<el-dialog v-model="visible" title="Hello world">
<p>欢迎使用 Element</p>
</el-dialog>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
三、快速开始
git clone https://github.com/ElementUI/element-starter
cd element-starter
npm install
npm run dev
npm build
浏览器访问http://localhost:8010/ ,打开网站。
打包
npm install -g webpack #如果没有安装webpack先安装它
webpack --color --progress
在项目目录的dist下即生成了打包后的项目。
编辑器Atom
下载:https://atom.io/
更换源
找到C:\Users\用户名.atom目录,新建文件名为 .apmrc 的文本文件,添加如下内容
copy con .apmrc
registry=https://registry.npm.taobao.org/
strict-ssl=false
apm install --check 测试是否成功检测了
安装vue插件:
搜索vue插件安装,或者下载https://github.com/hedefalk/atom-vue
放到C:\Users\ADMINI~1.atom\packages\atom-vue-master
cmd进入该目录执行
npm install
进行手工安装。
其它UI组件库:
http://mint-ui.github.io/#!/zh-cn
https://vux.li/#/