1. 组件
1.1. 由来
介绍组件之前思考为什么老项目的模块化不足?
Vue.js能够很好的解决组件化的问题,配合Vue.js 官方提供的vue-loader 能够很好的结合webpack做组件化的开发架构。
1.2. 使用
Vue 组件是用HTML-like 的语法编写的*.vue文件。每个 *.vue 文件都包括三部分(<template/>、<script/>、<style/>)。
<template>
<divclass="example">{{ msg }}</div>
</template>
<script>
exportdefault{
data() {
return{
msg:'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
❤ template
默认语言:html ;
每个 *.vue 文件几乎都包含一个<template>块;
<template>内的内容字符串会被提取出来,用来编译进Vue 组件内的 template 选项
❤ script
默认语言:js(默认ES2015也会通过Babel支持);
每个 *.vue 文件几乎都包含一个<script> 块;
脚本就像在CommonJS的环境中一样被执行(就像通过WebPACK中捆绑一个正常的.js模块)。就是说你可以 require() 其他的依赖项。由于默认支持 ES2015 ,你也可以用 import 和 export 语法。
该脚本必须导出一个 Vue.js 组件选项对象,也支持导出一个用 Vue.extend()创建的扩展构造函数,但首先是导出普通对象。
❤ style
默认语言:css;
每个 *.vue 文件支持多个<style> 标签;
默认会通过 style-loader把内容提取并加载到文档的<head>内的<style>标签内。这也是可以通过配置 Webpack使组件内所有样式提取到一个单一的CSS文件;
1.3. Vue-loader
vue-loader 是一个加载器,属于webpack下loader插件,可以把.vue文件输出成组件。
vue-loader 提供了一些非常酷炫的特性:
- ES2015默认可用;
- 在每个Vue 组件内支持其他的Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade。
- 把<style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。
- 对每个组件模拟有作用域的CSS。
- 开发阶段支持组件的热加载。
1.4. 组件通讯
方法 |
场景 |
props |
强耦合的组件间,单纯的信息传递 |
function |
强耦合的组件间多种通信方式 |
state |
同步行为、数据量叫小、数据位不被公用 |
eventbus |
异常行为、数据量较大、公用组件 |
1.4.1. props
如何双向绑定?
这样太麻烦了吧
1.4.2. function
组件数的问题
有更清晰扁平的通讯方式吗?
1.4.3. state
用了共享STATE后,又会需要有锁的需求,另外这个功能是异步的
1.4.4. eventbus
2. 常用组件
2.1. vue-router
vue-router是Vue.js官方的路由插件,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。http://router.vuejs.org/zh-cn/
2.2. vue-resource
vue-resource是Vue.js的一款请求插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。https://github.com/pagekit/vue-resource
2.3. axios
Vue 原本有一个官方推荐的ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource,目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求。
https://github.com/mzabriskie/axios
2.4. vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(像Redux的React)。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到devtools中。
http://vuex.vuejs.org/zh-cn/intro.html
2.5. 流行UI组件
❤ Vux
基于WeUI
和Vue
(2.x)开发的移动端UI组件库主要服务于微信页面https://github.com/airyland/vux
❤ Mint UI
项目主页: http://mint-ui.github.io/#!/zh-cn
demo: http://elemefe.github.io/mint-ui/#/
github: https://github.com/ElemeFE/mint-ui
中文文档: http://mint-ui.github.io/docs/#!/zh-cn
❤ Iview
配套的工作流:https://github.com/icarusion/vue-vueRouter-webpack
github: https://github.com/iview/iview
❤ vue-mui
官网: http://mui.yaobieting.com/
github: https://github.com/creatshare/vue-mui
❤ radon-ui
中文文档: https://luojilab.github.io/radon-ui/#!/
github: https://github.com/luojilab/radon-ui
❤ antd vue
中文文档: http://okoala.github.io/vue-antd/#!/components
github: https://github.com/okoala/vue-antd
❤ weex
官网: http://weex-project.io/cn/
github: https://github.com/alibaba/weex
中文文档: http://www.weex.help/topic/57792770eb60516a48db5485
❤ element
官网: http://element.eleme.io/#/zh-CN
github: http://github.com/elemefe
❤ N3
官网: https://n3-components.github.io/N3-components/
中文文档: https://n3-components.github.io/N3-components/component.html
英文文档: https://github.com/N3-components/N3-components
❤ vuikit
github: https://github.com/vuikit/vuikit
英文文档: https://vuikit.js.org/#/