vue视频学习笔记07

Posted 2020-09-10 消逝的绵羔

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包管理器 [email protected]
--------------------------------

饿了么团队开源一个基于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‘
},