vue 前端项目技术选型、开发工具、周边生态声明:这不是一篇介绍 Vue 基础知识的文章,需要熟悉 Vue 相关知识1. 架构选型演进如果页面比较简单,可以只用 vue如果需要本地路由功能,比如在单页面应用(SPA)中维持多个页面,并且可以本地控制路由跳转逻辑,这时就需要搭配使用 vue-router一般稍复杂的页面都会遇到一些问题:组件之间的通信问题(比如 A 组件想要改变 B 组件的数据)、跨组件数据储存与共享问题(比如多页面购物车数据存储)。vue 本身并不能很好的解决这个问题,需要搭配使用 vuex2. 选择 UI 框架
使用一个现成的 UI 框架,可以少写很多代码。
目前比较推荐的是:
3. 服务器端渲染
服务器端渲染用得最多的是 nuxt.js。
nuxt.js 有目录结构、书写方式、组件集成、项目构建等的约束,整个应用中是没有 html 文件的,所有的响应 html 都是 node 动态渲染的,包括里面的元信息、css, js 路径等。渲染过程中,nuxt.js 会根据路由,将首页所有的组件渲染成 html,余下的页面保留原生组件的格式,在客户端渲染。
更多参考:细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)
4. 开发工具
开发时主要会用到的工具。
4.1 storybook
storybook 为组件开发搭建了一个强大的开发环境,并提供了以下的几个功能:
更多参考: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. 插件库
一些很实用的插件库:
后续