-
安装:
element-starter https://github.com/ElementUI/element-starter
git clone https://github.com/ElementUI/element-starter.git
npm版本6以上 -
安装依赖包:
进入项目根目录,输入命令cnpm install
Paste_Image.png
-
编译,运行
命令npm run dev
Paste_Image.png
-
编译成功,访问网站地址
Paste_Image.png
-
配置文件
新建项目,项目结构为
|- src/ --------------------- 项目源代码 |- App.vue |- main.js -------------- 入口文件|- .babelrc ----------------- babel 配置文件|- index.html --------------- HTML 模板|- package.json ------------- npm 配置文件|- README.md ---------------- 项目帮助文档|- webpack.config.js -------- webpack 配置文件 -
组件Demo
Layout布局,Element里把屏幕分为24栏,类似于Bootstrap中的栅格系统,比Bootstrap的12栏更灵活。
example:
![](https://img.haomeiwen.com/i2815894/a5476ddbeb86bb03.png)
source:
![](https://img.haomeiwen.com/i2815894/25bf0c7e18a9b83a.png)
demo:
![](https://img.haomeiwen.com/i2815894/906a3ada6d5786a9.png)
RadioButton:单选框组
example:
![](https://img.haomeiwen.com/i2815894/e204ad52f5d02e0d.png)
source:
![](https://img.haomeiwen.com/i2815894/1a6a375f7b2b73ca.png)
数据绑定:
![](https://img.haomeiwen.com/i2815894/8ee7b7a9aed45fe3.png)
前端数据双向绑定(MVVM):
![](https://img.haomeiwen.com/i2815894/1c151b05e22dceeb.gif)
网友评论