ElementUI Demo

作者: SplendorZhang | 来源:发表于2017-03-31 09:28 被阅读0次
  1. 安装:
    element-starter https://github.com/ElementUI/element-starter
    git clone https://github.com/ElementUI/element-starter.git
    npm版本6以上

  2. 安装依赖包:
    进入项目根目录,输入命令cnpm install


    Paste_Image.png
  3. 编译,运行
    命令npm run dev


    Paste_Image.png
  4. 编译成功,访问网站地址


    Paste_Image.png
  5. 配置文件
    新建项目,项目结构为
    |- src/ --------------------- 项目源代码 |- App.vue |- main.js -------------- 入口文件|- .babelrc ----------------- babel 配置文件|- index.html --------------- HTML 模板|- package.json ------------- npm 配置文件|- README.md ---------------- 项目帮助文档|- webpack.config.js -------- webpack 配置文件

  6. 组件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

相关文章

网友评论

    本文标题:ElementUI Demo

    本文链接:https://www.haomeiwen.com/subject/ngxmottx.html