资讯专栏INFORMATION COLUMN

vue 前端项目技术选型、开发工具、周边生态

enali / 2224人阅读

摘要:有目录结构书写方式组件集成项目构建等的约束,整个应用中是没有文件的,所有的响应都是动态渲染的,包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。

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许可证)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100309.html

相关文章

  • vue 前端项目技术选型开发工具周边生态

    vue 前端项目技术选型开发工具周边生态 声明:这不是一篇介绍 Vue 基础知识的文章,需要熟悉 Vue 相关知识 主架构:vue, vue-router, vuex UI 框架:element ui, iview, vuetify, vux, mint-ui, vue-material, muse-ui, vant, bootstrap-vue 服务器端...

    Awbeci 评论0 收藏0
  • 前端项目如何管理

    ...t / mocha / tape / ava 可以参考: react 前端项目技术选型开发工具周边生态 vue 前端项目技术选型开发工具周边生态 1.6 开发友好 这主要是从目录结构优化着手,比如: 像下面这种目录结构,如果要编辑一个页面,需要...

    bawn 评论0 收藏0
  • react 前端项目技术选型开发工具周边生态

    react 前端项目技术选型开发工具周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展架构:styled-components, recompose, react-lo...

    hersion 评论0 收藏0
  • react 前端项目技术选型开发工具周边生态

    react 前端项目技术选型开发工具周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展架构:styled-components, recompose, react-lo...

    kidsamong 评论0 收藏0
  • react 前端项目技术选型开发工具周边生态

    react 前端项目技术选型开发工具周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展架构:styled-components, recompose, react-lo...

    Hanks10100 评论0 收藏0

发表评论

0条评论

enali

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<