未加星标

浅探 Vue 组件化思路

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

腾讯DeepOcean原创文章: dopro.io/explore-vue…

就在前几个月,Vue star 数突破了 100k,正式超越 React。

一、扯点家常

都说前端是个更新迭代飞快的领域,前端框架的演进也越来越激烈,以至于在技术社区里总看到有人求饶:“求不要更新了,老子学不动了”。

在过去的好多些年,jQuery 在前端领域都处于统治地位,在众多框架中脱颖而出,很多写惯了 jQuery 语法的开发者们,都发现再也回不去写原生 JS 了。随着时间的发展,也出现了各式各样的优秀框架,难免不同框架的粉丝也会把不同框架拿来对比,甚至互掐。说说今日的主角,Vue,在近几年也是非常火的一个框架。对于初学者来说,Vue 上手的成本真的很低了,易用度非常高,并且因为是国内开发者开发的,文档都是中文,国内大批量的公司都在使用,也导致了 Vue 的增速特别快。

不过也正是有不同框架的更新迭代,相互竞争,才创造一个越来越好的前端世界。正如 Vue 开发者在 twitter 发布的一条信息:


浅探 Vue 组件化思路
二、初入 Vue 大门 1. 什么是 Vue?

Vue 是一套用于构建用户界面的渐进式框架。它有着如下特点:

渐进式框架,采用自底向上增量开发设计 模版双向绑定机制 利用指令(directive)对 DOM 进行封装 组件化设计思想
浅探 Vue 组件化思路

Vue 的组件化将 UI 页面分割为若干组件进行组合和嵌套

2. 快速上手 Vue

工欲善其身,必先利其器。

无论我们学习哪种框架,搭建环境是必经之路。Vue 提供了一个官方的 CLI,为单页面应用快速搭建繁杂的脚手架。当然,任何的前提都是首先你了解了 Vue 相关的概念,不然新手一上来搭建 Vue-cli,看到里面牵扯到的 webpack、npm、nodejs等等概念,也是会一脸懵逼,很容易有从入门到放弃的想法的。

在搭建 Vue-cli 这点上,我们不妨直接站在巨人的肩膀上,这里有一篇带大家快速开启第一个 Vue 页面的教程,非常推荐: juejin.im/entry/58f48… 。

三、Vue 组件化

天下武功,唯快不破。

组件化的好处不用一一细说大家都知道了,组件是 Vue.js 最强大的功能之一,让我们用独立可复用的小组件来构建大型应用,开发效率更快更敏捷。为了更好地复用,这里以建立弹窗组件为实例,谈谈如何建立一个项目的组件库。

1. 组件库结构

qqcartoon-ui // 组件库名字复制代码

├── index.js // 组件文件复制代码

├── aa1 // 各个组件包复制代码

├── bb1复制代码

├── dialog 复制代码

├── index.js // 组件注册复制代码

├── src复制代码

├── index.scss // 组件样式复制代码

├── index.vue // 组件结构 复制代码

├──复制代码

└── ... 复制代码

一般在 Vue 里,我们会把组件写在 components 里,但是为了建立一个可以多个项目共用的组件库,这里重新命名,如 qqcartoon-ui 。

index.js: 收录了组件库里各个组件,以作为实例引用的入口。

import UIDialog from './dialog/index'复制代码

import UIA from './aa1/index'复制代码

import UIB from './bb1/index'复制代码

复制代码

export {复制代码

UIDialog,复制代码

UIA,复制代码

UIB复制代码

}复制代码

dialog/index.js: 完成组件注册。

import UIDialog from './src/index';复制代码

复制代码

UIDialog.install = function(Vue){复制代码

Vue.component(UIDialog.name,UIDialog

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:浅探 Vue 组件化思路
本站链接:https://www.codesec.net/view/610753.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(83)