快速掌握常用的vue组件

素颜马尾好姑娘i 2022-06-08 02:35 156阅读 0赞

前面的文章有系统的的介绍过[vue经典入门][vue]，主要是基于2.x的版本，下面将分享下如何快速掌握vue组件。

**目录**

1.  组件

1.1. 由来

1.2. 使用

1.3. Vue-loader

1.4. 组件通讯

1.4.1.  props

1.4.2.  function

1.4.3.  state

1.4.4.  eventbus

2.  常用组件

2.1. vue-router

2.2. vue-resource

2.3. axios

2.4. vuex

2.5. 流行UI组件

--------------------

# 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. 组件通讯 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>方法</p> </td> 
   <td> <p>场景</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>props</p> </td> 
   <td style="vertical-align:top;"> <p>强耦合的组件间，单纯的信息传递</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>function</p> </td> 
   <td style="vertical-align:top;"> <p>强耦合的组件间多种通信方式</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>state</p> </td> 
   <td style="vertical-align:top;"> <p>同步行为、数据量叫小、数据位不被公用</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>eventbus</p> </td> 
   <td style="vertical-align:top;"> <p>异常行为、数据量较大、公用组件</p> </td> 
  </tr> 
 </tbody> 
</table>

### 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/][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][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][https_github.com_mzabriskie_axios]

## 2.4. vuex ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(像Redux的React)。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到devtools中。

[http://vuex.vuejs.org/zh-cn/intro.html][http_vuex.vuejs.org_zh-cn_intro.html]

[https://github.com/vuejs/vuex][https_github.com_vuejs_vuex]

## 2.5. 流行UI组件 ##

❤ **Vux**

基于`WeUI`和`Vue`(2.x)开发的移动端UI组件库主要服务于微信页面[https://github.com/airyland/vux][https_github.com_airyland_vux]

❤ **Mint UI**

项目主页: [ http://mint-ui.github.io/\#!/zh-cn][http_mint-ui.github.io_zh-cn]

demo: [ http://elemefe.github.io/mint-ui/\#/][http_elemefe.github.io_mint-ui]

github: [ https://github.com/ElemeFE/mint-ui][https_github.com_ElemeFE_mint-ui]

中文文档: [ http://mint-ui.github.io/docs/\#!/zh-cn][http_mint-ui.github.io_docs_zh-cn]

❤ **Iview**

配套的工作流:[https://github.com/icarusion/vue-vueRouter-webpack][https_github.com_icarusion_vue-vueRouter-webpack]

github: [ https://github.com/iview/iview][https_github.com_iview_iview]

官网: [https://www.iviewui.com/][https_www.iviewui.com]

❤ **vue-mui**

官网: [http://mui.yaobieting.com/][http_mui.yaobieting.com]

github: [ https://github.com/creatshare/vue-mui][https_github.com_creatshare_vue-mui]

❤ **radon-ui**

中文文档: [ https://luojilab.github.io/radon-ui/\#!/][https_luojilab.github.io_radon-ui]

github: [ https://github.com/luojilab/radon-ui][https_github.com_luojilab_radon-ui]

❤ **antd vue**

中文文档: [ http://okoala.github.io/vue-antd/\#!/components][http_okoala.github.io_vue-antd_components]

github: [ https://github.com/okoala/vue-antd][https_github.com_okoala_vue-antd]

❤ **weex**

社区: [http://www.weex.help/][http_www.weex.help]

官网: [http://weex-project.io/cn/][http_weex-project.io_cn]

github: [ https://github.com/alibaba/weex][https_github.com_alibaba_weex]

中文文档: [ http://www.weex.help/topic/57792770eb60516a48db5485][http_www.weex.help_topic_57792770eb60516a48db5485]

❤ **element**

官网: [ http://element.eleme.io/\#/zh-CN][http_element.eleme.io_zh-CN]

github: [http://github.com/elemefe][http_github.com_elemefe]

❤ **N3**

官网: [ https://n3-components.github.io/N3-components/][https_n3-components.github.io_N3-components]

中文文档: [ https://n3-components.github.io/N3-components/component.html][https_n3-components.github.io_N3-components_component.html]

英文文档: [ https://github.com/N3-components/N3-components][https_github.com_N3-components_N3-components]

❤ **vuikit**

github: [ https://github.com/vuikit/vuikit][https_github.com_vuikit_vuikit]

英文文档: [https://vuikit.js.org/\#/][https_vuikit.js.org]

组件化的理念需要重点复习一下之前章节《[js模块化规约][js]》![vue][]

[vue]: /images/20220608/689b25390d444168a0f0538b9bc5d350.png
[http_router.vuejs.org_zh-cn]: http://router.vuejs.org/zh-cn/
[https_github.com_pagekit_vue-resource]: https://github.com/pagekit/vue-resource
[https_github.com_mzabriskie_axios]: https://github.com/mzabriskie/axios
[http_vuex.vuejs.org_zh-cn_intro.html]: http://vuex.vuejs.org/zh-cn/intro.html
[https_github.com_vuejs_vuex]: https://github.com/vuejs/vuex
[https_github.com_airyland_vux]: https://github.com/airyland/vux
[http_mint-ui.github.io_zh-cn]: http://mint-ui.github.io/#!/zh-cn
[http_elemefe.github.io_mint-ui]: http://elemefe.github.io/mint-ui/#/
[https_github.com_ElemeFE_mint-ui]: https://github.com/ElemeFE/mint-ui
[http_mint-ui.github.io_docs_zh-cn]: http://mint-ui.github.io/docs/#!/zh-cn
[https_github.com_icarusion_vue-vueRouter-webpack]: https://github.com/icarusion/vue-vueRouter-webpack
[https_github.com_iview_iview]: https://github.com/iview/iview
[https_www.iviewui.com]: https://www.iviewui.com/
[http_mui.yaobieting.com]: http://mui.yaobieting.com/
[https_github.com_creatshare_vue-mui]: https://github.com/creatshare/vue-mui
[https_luojilab.github.io_radon-ui]: https://luojilab.github.io/radon-ui/#!/
[https_github.com_luojilab_radon-ui]: https://github.com/luojilab/radon-ui
[http_okoala.github.io_vue-antd_components]: http://okoala.github.io/vue-antd/#!/components
[https_github.com_okoala_vue-antd]: https://github.com/okoala/vue-antd
[http_www.weex.help]: http://www.weex.help/
[http_weex-project.io_cn]: http://weex-project.io/cn/
[https_github.com_alibaba_weex]: https://github.com/alibaba/weex
[http_www.weex.help_topic_57792770eb60516a48db5485]: http://www.weex.help/topic/57792770eb60516a48db5485
[http_element.eleme.io_zh-CN]: http://element.eleme.io/#/zh-CN
[http_github.com_elemefe]: http://github.com/elemefe
[https_n3-components.github.io_N3-components]: https://n3-components.github.io/N3-components/
[https_n3-components.github.io_N3-components_component.html]: https://n3-components.github.io/N3-components/component.html
[https_github.com_N3-components_N3-components]: https://github.com/N3-components/N3-components
[https_github.com_vuikit_vuikit]: https://github.com/vuikit/vuikit
[https_vuikit.js.org]: https://vuikit.js.org/#/
[js]: https://blog.csdn.net/alex_xfboy/article/details/77942338