vue视频学习笔记07
video 7
vue问题:
论坛
http://bbs.zhinengshe.com
------------------------------------------------
UI组件
别人提供好一堆东西
目的:
为了提高开发效率
功能
原则: 拿过来直接使用
vue-cli -> vue-loader
//创建项目
vue init webpack-simple bootstrap-demo
//下载bootstrap
bower install bootrap
bootstrap:
twitter 开源
简洁、大方
官网文档
基于 jquery
栅格化系统+响应式工具 (移动端、pad、pc)
按钮
--------------------------------
bower 前端包管理器 jquery#1.11.1
自动解决依赖
npm node包管理器 jquery@1.11.1
--------------------------------
饿了么团队开源一个基于vue 组件库
elementUI PC
MintUI 移动端
--------------------------------
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-loader
less:
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
//使用组件调用UI
//组件加事件---有点像事件委托
<button @click="get"></button>
<mybutton @click.native="get"></mybutton>
axios --------- ajax,官方推荐
https://github.com/mzabriskie/axios
1.cnpm install axios -D
2.import axios from '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);
http://mint-ui.github.io/docs/#!/zh-cn2
论坛:
-------------------------------------------------
-------------------------------------------------------
Mint-ui-demo: 看着手册走了一遍
https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo
//引入css使用模块
//需要先在package.json里加载css-loader和style-loader
cnpm install style-loader css-loader -D
webpack.config.js里添加代码
{
test: /\.css$/,
loader: 'style!css'
},
vue视频学习笔记07的更多相关文章
- vue视频学习笔记06
video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...
- vue视频学习笔记04
video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm ins ...
- vue视频学习笔记05
video 5 vue2.0:bower info vue http://vuejs.org/到了2.0以后,有哪些变化? 1. 在每个组件模板,不在支持片段代码组件中模板:之前:<templa ...
- vue视频学习笔记03
video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter( ...
- vue视频学习笔记02
video 2 vue制作weibo交互 vue-> 1.0vue-resource ajax php服务器环境(node) this.$http.get()/post()/jsonp() th ...
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
- vue视频学习笔记
video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
随机推荐
- mongoose简单使用样例
新建文件 app.js 内容如下: var mongoose = require('mongoose') , Schema = mongoose.Schema; mongoose.connect('m ...
- Spring MVC 处理异常的3种方式
使用Spring MVC开发的博客网站时,遇到了如何处理业务层抛出的异常的问题,查阅到了spring官方博客-spring MVC中异常的处理,以下将会以登录模块为示例. 愚蠢的处理方式 处理异常遵循 ...
- Unity3D对弈游戏:狼吃羊游戏
简介 中文名:狼与羊 英文名称:Wolves&Sheep 游戏类型:休闲/棋类 玩家人数:单人或双人 游戏下载:Windows.Android 游戏描述:童年时与小伙伴常玩的一种游戏,游戏简单 ...
- 测试开发Python培训:实现屌丝的黄色图片收藏愿望(小插曲)
男学员在学习python的自动化过程中对于爬虫很感兴趣,有些学员就想能收藏一些情色图片,供自己欣赏.作为讲师只能是满足愿望,帮助大家实现对美的追求,http://wanimal.lofter.com/ ...
- Xmpp实现简单聊天系列 --- ②用户注册和登陆
不管是注册还是登陆,亦或是聊天等功能,都必须先进行服务器连接,连接代码如下 ①自定义Xmpp连接工具类: ②调用创建连接的方法: ③连接服务器方法: *注意 连接方式为客服 ...
- Windows下Nginx的安装与使用(一):配置端口转发
什么是端口转发 当我们在服务器上搭建一个图书以及一个电影的应用,其中图书应用启动了 8001 端口,电影应用启动了 8002 端口.此时如果我们可以通过: localhost:8001 //图书 lo ...
- 项目的ip地址更改,用git从远程提取代码出现错误,提示为 network error connection timed out
昨天公司的ip进行了修改,在今天从远程提取代码的过程中提示network error connection timed out错误,从网上看了一下解决方法 1:打开项目文件夹,点击查看 2:勾选隐藏的 ...
- 震荡信号Simulink仿真
1. simulink仿真设计 震荡信号本质是调制信号,可以表示为: u(t)=A*(1+m*cos(Ωt+θ))*cos(ωt+φ)=A*cos (ωt+φ)+ A*m*cos(Ωt+θ)*cos( ...
- 通过js获取元素css3的transform rotate旋转角度方法
我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...
- 前端开发必须说的那些事之——同源策略(same origin policy)
同源策略指的是三个相同 协议相同 域名相同 端口相同 如https://www.baidu.com/hahah.html这个网址来说 https是使用的协议,www.baidu.com是域名,端口号默 ...