vue 前端项目技术选型、开发工具、周边生态
栏目: JavaScript · 发布时间: 5年前
内容简介:声明:这不是一篇介绍 Vue 基础知识的文章,需要熟悉 Vue 相关知识使用一个现成的 UI 框架,可以少写很多代码。目前比较推荐的是:
vue 前端项目技术选型、开发 工具 、周边生态
声明:这不是一篇介绍 Vue 基础知识的文章,需要熟悉 Vue 相关知识
- 主架构: vue , vue-router , vuex
- UI 框架: element ui , iview , vuetify , vux , mint-ui , vue-material , muse-ui , vant , bootstrap-vue
- 服务器端渲染: nuxt.js
- 开发工具: storybook , vue-devtools , vue-loader
- 测试: vue-test-utils , jest
- 插件库: better-scroll , Vue.Draggable , vee-validate , vue-awesome-swiper , vue-multiselect , vue-i18n , v-charts
1. 架构选型演进
- 如果页面比较简单,可以只用
vue
- 如果需要本地路由功能,比如在单页面应用(SPA)中维持多个页面,并且可以本地控制路由跳转逻辑,这时就需要搭配使用
vue-router
- 一般稍复杂的页面都会遇到一些问题:组件之间的通信问题(比如 A 组件想要改变 B 组件的数据)、跨组件数据储存与共享问题(比如多页面购物车数据存储)。
vue
本身并不能很好的解决这个问题,需要搭配使用vuex
2. 选择 UI 框架
使用一个现成的 UI 框架,可以少写很多代码。
目前比较推荐的是:
- element ui :饿了么出品
- iview :一套很棒的 UI 框架
- vuetify :google 材质设计的实现
- vux :移动端 UI 框架
- mint-ui :移动端 UI 框架
- vue-material :另一个 google 材质设计的实现
- muse-ui :移动端 UI 框架
- vant :移动端 UI 框架
3. 服务器端渲染
服务器端渲染用得最多的是 nuxt.js 。
nuxt.js
有目录结构、书写方式、组件集成、项目构建等的约束,整个应用中是没有 html
文件的,所有的响应 html
都是 node 动态渲染的,包括里面的元信息、 css, js
路径等。渲染过程中, nuxt.js
会根据路由,将首页所有的组件渲染成 html
,余下的页面保留原生组件的格式,在客户端渲染。
更多参考: 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)
4. 开发工具
开发时主要会用到的工具。
4.1 storybook
storybook
为组件开发搭建了一个强大的开发环境,并提供了以下的几个功能:
- 提供了一个强大的 UI 组件管理页面,可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态
- 在自动化交互测试之外,可以很方便的进行手动交互测试,并且可以动态改变组件参数,查看视图变化
- 可以将组件预览导出为静态资源,这样就可以很方便查看组件的文档和不同参数对应的不同视图
- 还有一系列的插件,提供了很多额外的功能,帮助你更好的开发、测试、优化组件
更多参考: react、vue 组件开发利器:storybook
4.2 vue-devtools
这是专门针对 vue
组件开发的 chrome 开发者工具插件,就像开发者工具的 Elements
一样,可以查看整个页面的 vue
组件树和每个组件的 data
,并且可以动态的更改 data
,然后会更新 UI 到应用上。
安装
通过 chrome 应用商店安装 chrome - vuejs-devtools .
其他安装方式查看 vue-devtools .
4.3 vue-loader
加载 .vue
单文件组件的 webpack loader。
5. 测试
一般 vue
组件的测试,会用 vue-test-utils + jest / mocha / tape / ava 。
6. 插件库
一些很实用的插件库:
- better-scroll : iscroll 的封装
- Vue.Draggable : Sortable 的封装
- vee-validate :数据校验组件
- vue-awesome-swiper : swiper 的封装
- vue-multiselect :下拉选择组件
- vue-i18n :国际化组件
- v-charts : echarts 的封装
后续
更多博客,查看 https://github.com/senntyou/blogs
作者: 深予之 (@senntyou)
版权声明:自由转载-非商用-非衍生-保持署名( 创意共享3.0许可证 )
以上所述就是小编给大家介绍的《vue 前端项目技术选型、开发工具、周边生态》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端技术选型及背后思考
- 数据产品的前端技术选型的思考
- 前端构建:3类13种热门工具的选型参考
- 如何架构一个中后台项目的前端部分(技术选型篇)
- 【译】前端框架技术选型 React vs. Vue (vs. Angular)
- 如何选型一个合适的框架:分布式任务调度框架选型
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。