安装:
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:
Paste_Image.png
source:
Paste_Image.png
demo:
Paste_Image.png
RadioButton:单选框组
example:
Paste_Image.png
source:
Paste_Image.png
数据绑定:
Paste_Image.png
前端数据双向绑定(MVVM):
2017-03-30_18-01-03.gif