vue结合elementUI,MinUi

来源:互联网 发布:淘宝众筹不成功会怎样 编辑:程序博客网 时间:2024/05/17 07:46

UI组件 :利用别人提供的好东西,目的:提高开发的效率

Boostrap: twitter开源,简洁大方
基于jquery
栅格化系统+响应式工具(移动+PC+PAD),按钮


bower 前段包管理器 jquery#1.1.1.1
npm node包管理器 jquery@1.11.1

饿了么:基于vue组件库
elementUI: PC端
MinUI: 移动端

`elementUI:
如何使用

官网:http://element.eleme.io/

使用:
1. 安装 element-ui
npm i element-ui -D

npm install element-ui --save-dev//   i  ->    install//   D     ->    --save-dev//   S  ->    --save

2. 引入 main.js 入口文件
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-default/index.css’

全部引入

3. 使用组件
Vue.use(ElementUI)

css-loader      引入css字体图标    file-loaderless:    less

less-loader

按需加载相应组件: √
就需要 按钮
1. babel-plugin-component
cnpm install babel-plugin-component -D
2. .babelrc文件里面新增一个配置
“plugins”: [[“component”, [
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-default”
}
]]]
3. 想用哪个组件就用哪个
引入:
import {Button,Radio} from ‘element-ui’
使用:
a). Vue.component(Button.name, Button); 个人不太喜欢
b). Vue.use(Button); √


发送请求:
vue-resourse 交互

axios

element-ui -> pc

mint-ui
移动端 ui库

http://mint-ui.github.io/
  1. 下载
    npm install mint-ui -S

    -S
    –save

  2. 引入
    import Vue from ‘vue’;
    import Mint from ‘mint-ui’;
    import ‘mint-ui/lib/style.css’
    Vue.use(Mint);

    按需引入:
    import { Cell, Checklist } from ‘minu-ui’;
    Vue.component(Cell.name, Cell);
    Vue.component(Checklist.name, Checklist);
    `

1 0
原创粉丝点击