Framework Structure
  Recommend Reading

工程介绍

Egg Vue 工程解决方案特性支持Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制。使用 TypeScript 或 JavaScript 编写前端和Node端代码,支持 ts-node 无编译 和 Webpack 编译开...

Read more

快速开始

基于 Egg + Vue + Webpack 服务端渲染开发指南1. 项目初始化1.1 easywebpack-cli 脚手架初始化项目安装脚手架 npm install easywebpack-cli -g 命令行,然后就可以使用 easywebpack 或 easy 命令命令行运行 eas...

Read more

从零开始

从零开始搭建 Egg + Vue + Webpack 服务端渲染项目1. 初始化环境安装 Node LST (8.x.x) 环境: https://nodejs.org/zh-cn2. 初始化 egg 项目https://github.com/eggjs/egg-init/blob/maste...

Read more

渲染模式

Egg + Vue 渲染模式目前 egg-view-vue-ssr 支持 服务端渲染模式 和 前端渲染模式 两种渲染模式Egg + Vue 服务端 Node 渲染模式这里服务端渲染指的是编写的 Vue 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器。MVVM 服务端渲染相比前端渲染,支持SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。 同时 MVVM 数据驱动方式有着更快的开发效率。总体来说,MVVM 框架的服务端渲染技术比较适合有一定交互性,且对SEO...

Read more
工程介绍 工程介绍
Egg Vue 工程解决方案特性支持Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制。使用 TypeScript 或 JavaScript 编写前端和Node端代码,支持 ts-node 无编译 和 Webpack 编译开...
2020-05-31 sky
快速开始 快速开始
基于 Egg + Vue + Webpack 服务端渲染开发指南1. 项目初始化1.1 easywebpack-cli 脚手架初始化项目安装脚手架 npm install easywebpack-cli -g 命令行,然后就可以使用 easywebpack 或 easy 命令命令行运行 eas...
2020-05-31 sky
从零开始 从零开始
从零开始搭建 Egg + Vue + Webpack 服务端渲染项目1. 初始化环境安装 Node LST (8.x.x) 环境: https://nodejs.org/zh-cn2. 初始化 egg 项目https://github.com/eggjs/egg-init/blob/maste...
2020-05-31 sky
服务端渲染模式 服务端渲染模式
Egg + Vue 服务端 Node 渲染模式目前 egg-view-vue-ssr 支持 服务端渲染模式 和 前端渲染模式 两种渲染模式这里服务端渲染指的是编写的 Vue 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器。MVVM 服务端渲染相比前端渲染,支持SEO,...
2020-05-31 sky
前端渲染模式 前端渲染模式
浏览器渲染模式指的是Node 端只会根据包含html, head, body节点信息的 layout 文件输出骨架内容, 页面的实际内容交给浏览器去渲染。调用 egg-view-vue-ssr 的 renderClient 方法实现客户端浏览器渲染在使用上面, 客户端浏览器渲染模式只需要把 render 改成 renderClient。 正常情况下, 能进行 render 运行的, renderClient 方式也能正常运行。Webpack 配置优化,提高构建速度在 ${root}/webpack...
2020-05-31 sky
HTML前端渲染 HTML前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 Vue 的前端渲染模式,但都依赖 egg-view-Vue-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2020-05-31 sky
asset 渲染模式 asset 渲染模式
背景在 前端渲染模式 章节讲到了基于 Vue 的一体化的前端渲染模式,好处是不需要借助第三方模板引擎且无需关注静态资源注入问题,但有两个小的功能限制:layout 模板数据绑定能力较弱资源注入不能自己定义,比如 async, crossorigin 等配置针对上面问题 egg-view-vue...
2020-05-31 sky
自定义前端渲染 自定义前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 Vue 的前端渲染模式,但都依赖 egg-view-Vue-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2020-05-31 sky
部署流程 部署流程
项目开发在 egg-vue-webpack-boilerplate 骨架项目中, 提供了一些demo, 如果要进行新项目开发,可以删除部分文件:app/web/page 是页面目录。下面的每个目录都是一个单独的页面,其中 app 目录是一个单页面服务端渲染例子,其他是简单的 Vue 服务端渲染...
2020-05-31 sky
配置说明 配置说明
webpack.config.js easywebpack@4.8.0 开始支持,因为有了默认配置,所以最新的骨架项目中,webpack.config.js 文件为非必须配置。使用 node-glob 遍历文件。下面配置会自动遍历 app/web/page 目录的所有 .vue 文件作为 en...
2020-05-31 sky
入口实现 入口实现
服务端渲染模式需要对同一份 vue 文件构建出两份 JSBundle 文件出来,一份给 Node 渲染使用,一份给浏览器渲染使用,但 Node 和浏览器文件初始化代码是不一样的,这就需要我们针对入口代码进行分别实现。这里提供三种实现方案,请根据项目需要选择合适的方案。方案一: 完全自定义入口代...
2020-05-31 sky
数据请求 数据请求
Egg Vue SSR asyncData 实现,这里提供一种 asyncData 获取数据的方式解决单页面 SSR 刷新不走 SSR 问题。 Node 不直接获取数据,获取数据的代码直接写到前端代码里面
2020-05-31 sky
异步加载 异步加载
Component Async Load Render / 组件异步加载渲染1. JavaScript File Code Spliting 代码分离Webpack打包是把所有js代码打成一个js文件,我们可以通过 CommonsChunkPlugin 分离出公共组件,但这远远不够。 实际业务...
2020-05-31 sky
SEO实现 SEO实现
Egg + Vue SSR SEO 实现MVVM 服务端渲染相比前端渲染,支持SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。在 Egg + Vue 的方案里面, HTML head 里面 meta 信息也作为 Vue 服务端渲染的一部分, 和普通的数据绑定没有什么差别。在实现上面, 考虑到页面有统一的 HTML, header, footer, body 骨架, 可以结合 Vue 的 slot 封装成一个统一的 layout 组件。一. layout...
2020-05-31 sky
资源内敛 资源内敛
在日常业务开发过程中,我们可能需要内联文本,JS,CSS到页面,这时我们可以 raw-loader webpack loader 实现。
2020-05-31 sky
TypeScript TypeScript
TypeScript 构建支持Node 启用 typescript 编译 egg-bin dev -r egg-ts-helper/register 实现开发 tsc -p tsconfig.json 编译package.json 运行脚本{  "scripts": { ...
2020-05-31 sky
Service Worker Service Worker
Egg + Vue/Vue SSR 使用 service workereasywebpack 默认生成的 service-worker.js 是在 ${app_root}/public/service-worker.js这里. 这样 service-worker.js 访问路径是 http://127.0.0.1:7001/public/service-worker.js。将 service worker 文件注册为 /public/service-worker.js,那么,service...
2020-05-31 sky
i18n 国际化支持 i18n 国际化支持
在 Egg Vue SSR 方案中,可以使用 vue-i18n 实现国际化支持, 使用前请先阅读以下文档:http://kazupon.github.io/vue-i18n/guide/started.html#htmlhttp://kazupon.github.io/vue-i18n/guide/started.html#javascriptEgg + Vue 实现国际化安装依赖npm install vue-i18n --save 编写 cn 和 en 语言文件中文配置:egg-vue...
2020-05-31 sky
Babel 构建优化 Babel 构建优化
在进行 Egg + Vue 进行 SSR 模式开发时,运行 npm run dev 后你会看到如下界面, 启动了两个 Webpack 构建实例:Node 模式 和 Web 模式。SSR 运行需要 Webapck 单独构建 target: node 和 target: web 主要的差异...
2020-05-31 sky
插件使用 插件使用
插件流程/egg-vue/build插件介绍egg-webpack 用于在 egg 项目中启动 Webpack 编译服务,具体流程请见 构建流程 。 该插件只在本地启用。 该插件除了深度结合 easywebpack 体系使用, 也可...
2020-05-31 sky
相关问题 相关问题
常见问题 issue 汇总服务端 SEO 设置问题 文件打包部署问题Server Side Render 时,$mount节点重新渲染问题see issue:https://github.com/easy-team/egg-vue-webpack-boilerplate/issues/125a...
2020-05-31 sky
项目一览 项目一览
Egg + Vue 服务端渲染项目地址:https://github.com/easy-team/egg-vue-webpack-boilerplateEgg + Vue 前端渲染项目地址:https://github.com/easy-team/egg-vue-webpack-boilerplat...
2020-05-31 sky
社区作品 社区作品
Egg Vue Examples
2020-05-31 sky