[FE] 有效开展一个前端项目-V3 (Vue CLI / Vue SSR )
关于如何有效开展一个前端项目,博客之前已有两篇如下:
一些组件已经是过去式,但 Nodejs、Webpack 依旧再用,Vuejs、Vuex、Vue-router、vue-devtools 依旧再用。
记得 gulp 和 angular 已经是 2015~2016 的事,有了 webpack 和 react、Vuejs 之后新项目都已经择新使用。
vuejs-templates 是 2017~2018 的事,并且该项目自己的说明中已经不推荐使用,而是推荐了 Vue CLI 来创建新项目。
我们知道 Vuejs 的特点是提供了简单好用的方式来创建 SPA 应用,它在这一领域属于佼佼者。
但是很多 Web 站点,要面对的是既想使用 Vuejs 和 npm 生态带来的便利,又想兼顾 SEO,那么此时就剩下唯一的选择了:Vue SSR
这里我们分析一下,为什么不选择后端直接渲染的方式,如果是个人博客类的站点其实影响不大。
但是商业项目要考虑 ①可维护性,那么当然前后端分离,人员分工明确,是比较适合的选择。
还要考虑 ②可扩展性,那么前端页面可以完全放到 CDN 上,后端纯接口更易于优化和扩展。
另外就是 ③后端复用性,同一个接口,客户端可以是 Web,H5,App,大大减少了前期后端投入。
关于 Vue CLI 去使用一下就可以了解大致的选项,下面是我选择的一些,基本是全配置型:
关于 Vue SSR,思想就是在启动的 Node Server 中,每次请求来都实例化 Vue,内容渲染成字符再响应给浏览器,
额外有一些使用禁忌需要注意,Nodejs 环境不同于浏览器,没有 DOM、Window 对象。
这里再提一下 Prerender,它不需要单独的 Node Server ,成本小,页面不多也不需要动态搜索的可以考虑这种预生成方式。
其他支持 JS 渲染引擎的后端也可以做 SSR,但是有点舍近求远,免不了要用JS,那么用 PHPV8js 输出就不如直接交给 Node 了。