7、vueJs基础知识07
UI组件库
element-ui和mint-ui 其实都是借鉴了bootstrap
bootstrap:
由twitter 开源
简洁、大方
官网文档https://www.bootcss.com/
基于 jquery(使用时必须先引入jq)
栅格化系统+响应式工具 (移动端、pad、pc)
按钮
使用工具
bower 前端包管理器 jquery#1.11.1
自动解决依赖
npm node包管理器 jquery@1.11.1
都是由饿了么团队开源的一个基于vue 组件库
elementUI PC
MintUI 移动端
在运行vue项目中,更改页面时会自动刷新,是因为运行了两个
HMR:hot modal reload
WDS:web dev server
Element-ui
elementUI:
如何使用 官网:http://element.eleme.io/
使用:
. 安装 element-ui
npm i element-ui -S npm install element-ui --save-dev // i -> install
// D -> --save-dev 开发依赖
// S -> --save 开发生产依赖
. 引入 main.js 入口文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'(需要引入css) 全部引入
. 使用组件
Vue.use(ElementUI) style-loader
css-loader 引入css (loader:'style!css') file-loader 字体图标库 less:
less (定义变量,函数,传参)
less-loader
按需加载相应ui组件
按需加载相应组件: √
就需要 按钮,需要安装一个插件 babel-plugin-component
. babel-plugin-component
cnpm install babel-plugin-component -D
. .babelrc文件里面新增一个配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
. 想用哪个组件就用哪个
引入:
import {Button,Radio} from 'element-ui'
使用:
a). Vue.component(Button.name, Button); 个人不太喜欢
b). Vue.use(Button); √
ui组件的引入和使用可以单独写在一个js文件中
发送请求:
vue-resourse 交互
axios(用法与vue-resourse相同)
自定义的组件也可以加事件,@click.native ="get"(类似于事件委托)
github上获取用户信息https://api.github.com/users/SSX1608
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' (还需要引入css模块)
Vue.use(Mint); 按需引入:
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist); http://mint-ui.github.io/docs/#!/zh-cn2
7、vueJs基础知识07的更多相关文章
- vue面试题整理vuejs基础知识整理
初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...
- 6、vueJs基础知识06
vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...
- 1、vueJs基础知识01
vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...
- 5、vueJs基础知识05
vue2.0相比于1.0的变化 1.在每个组件模板中,不再支持片段代码,需要一个根元素包裹 组件中模板: 之前: <template> <h3>我是组件</h3>& ...
- 4、vueJs基础知识04
简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件(组件),官方推荐命名法(首字母大写) |-components 组件存放的文件夹 | ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- 2、vueJs基础知识02
vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...
- C#基础知识记录一
C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...
- C# 基础知识总结
要学好C#,基础知识的重要性不言而喻,现将常用到的一些基础进行总结,总结如下: 1. 数据类型转换: 强制类型转换(Chart--> int): char cr='A'; int i = ...
随机推荐
- 【转载】C#中string类使用Remove方法来移除指定位置的字符
在C#的字符串操作过程中,有时候需要将字符串中指定位置的字符移除,此时就可能使用到字符串类string类中的Remove方法,此方法允许指定移除开始的开始的索引位置,以及移除的长度信息等,共有2个重载 ...
- windows下安装hexo和生成博客
首先在电脑上安装node和git,这个只要在相关官网的下载然后一步安装即可. 然后在你的电脑上新建一个文件夹,用来存放你的博客文件,比如创建hexo 进入该文件,右键打开git bash 安装hexo ...
- C++之同名覆盖、多态
一.同名覆盖引发的问题 父子间的赋值兼容--子类对象可以当作父类对象使用(兼容性) 1.子类对象可以直接赋值给父类对象 2.子类对象可以直接初始化父类对象 3.父类指针可以指向子类对象 4.父类引用可 ...
- 一分钟读懂低功耗蓝牙(BLE)连接数据包
一分钟读懂低功耗蓝牙(BLE)连接数据包 1.概述 BLE 连接过程中有三个重要的数据包:SCAN_REQ, SCAN_RSP 和 CONNECT_REQ. SCAN_REQ: 扫描请求,由主设备(M ...
- 原子性atomic/nonatomic
原子性:并发编程中确保其操作具备整体性,系统其它部分无法观察到中间步骤,只能看到操作前后的结果. 决定编译器生成的getter和setter是否原子(natomic)操作. i 因此,atomic ...
- Cephfs 部署 创建 metadata 池 data池
上一次部署了ceph分布式存储,接下来我们部署ceph的文件系统.Ceph文件系统至少需要两个RADOS池,一个用于数据,一个用于元数据. 创建metadata 池 后面数字表示 PG 和pgp数 c ...
- angularcli 第二篇(数据绑定、属性申明、绑定属性)
1.数据绑定 插值绑定: <li>{{ hero.name }} </li> 或 <div class = "{{ demo }}&q ...
- vue-cli3.0 脚手架搭建项目的过程详解
1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...
- CentOS7安装Redis单实例
由于环境差异,安装过程可能遇到各种各样的问题,不要慌,根据错误提示解决即可. 1.下载redis下载地址在:redis.io比如把Redis安装到/usr/local/soft/ cd /usr/lo ...
- Docker——概念学习
百度百科概念: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化.容器是完全 ...