vue前端项目技术选型、开发工具、周边生态声明：本文不是介绍Vue基础知识的文章，需要熟悉Vue-相关知识主要架构：vue、vue-router、vuexUI框架：elementui、iview、vuetify、vux、mint-ui、vue-material、muse-ui、vant、bootstrap-vue服务端渲染：nuxt.js开发工具：故事书、vue-devtools、vue-loader测试：vue-test-utils、jest插件库：better-scroll、Vue.Draggable、vee-validate、vue-awesome-swiper、vue-multiselect、vue-i18n、v-charts1.架构选择演进如果page比较简单，可以只用vue如果需要本地路由功能，比如在单页应用（SPA）中维护多个页面，可以在本地控制路由跳转逻辑，那么就需要一般比较复杂的页面使用vue-router会遇到一些问题：组件之间的通信问题（比如A组件要改变B组件的数据），跨组件的数据存储和共享问题（比如多页购物车数据存储）。Vue本身并不能很好的解决这个问题。需要和vuex2一起使用。选择UI框架使用现成的UI框架，可以节省大量代码。目前推荐的有：elementui：饿了么出品iview：一个很棒的UI框架vuetify：googlematerialdesign的实现vux：移动端UI框架mint-ui：移动端UI框架vue-material：另一个googlematerial的实现designmuse-ui:移动端UI框架vant:移动端UI框架3.服务端渲染服务端渲染用的最多的是nuxt.js。Nuxt.js对目录结构、编写风格、组件集成、项目构建等都有约束，整个应用中没有html文件，所有响应html由node动态渲染，包括meta信息、css、js路径等..在渲染过程中，nuxt.js会根据路由将首页的所有组件渲染成html，其余页面保留原有组件的格式在客户端渲染。更多参考：详解后端模板渲染、客户端渲染、节点中间层、服务端渲染（ssr）4.开发工具开发过程中使用的主要工具。4.1storybookStorybook为组件开发搭建了一个强大的开发环境，并提供了以下功能：提供了强大的UI组件管理页面，可以方便清晰的对多个组件或一个组件的多个组件进行分组管理除了自动化交互测试，不同状态可以很容易地用于手动交互测试，组件参数可以动态改变。查看视图变化可以将组件预览导出为静态资源，方便查看组件文档和对应不同的参数。还有一系列针对不同视图的插件，它们提供了很多额外的功能来帮助您更好地开发、测试和优化组件。更多参考：react、vue组件开发工具：storybook4.2vue-devtools这是专门为vue组件开发的chrome开发者工具插件，就像开发者工具的Elements一样，可以查看整个页面的vue组件树以及每个组件的数据，并且可以动态改变数据，然后更新UI给应用程序。通过chrome应用商店安装chrome-vuejs-devtools。其他安装方式见vue-devtools.4.3vue-loader加载.vue单文件组件的webpackloader。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)版权声明：免费转载-非商用-非衍生-保留属性（CreativeCommons3.0许可）
