egg html模板,egg+vue服务端渲染模板项目介绍

egg-vue-webpack-boilerplate

基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目，包括前台系统(SSR MPA)和后台管理系统(SSR SPA)。

系统功能

采用 Egg + Vue 服务端渲染

[图片上传失败...(image-a57696-1602485610603)]

博客首页

文章列表

文章详情

采用 Egg + Vue + Vue-Router + Element 单页面服务端同构渲染

[图片上传失败...(image-2c10d1-1602485610603)]

Dashboard

Markdown

文章管理

骨架介绍

常用功能

常用 Example 实现见 awesome 分支代码。

Sass/Less/Stylus 功能

Dynamic Component Load

Element-UI 集成

Single Page Application

纯净分支

因该项目包含了多种实现, 提供多种例子实现，为防干扰, 特提供了两个纯净版本分支用于实际项目开发, 请自行选用。

Egg + Vue + Axios 多页面服务端渲染分支 feature/green/multi

Egg + Vue + vue-router + vuex + axios 单页面服务端渲染分支 feature/green/spa

Egg + Vue + vue-router + vuex + axios 前端渲染 asset 方案 feature/green/asset

Egg + Vue + vue-router + vuex + axios 前端渲染一体化方案 element-admin

版本

Egg 版本： ^2.x.x

Node 版本: ^8.x.x+

Vue 版本: ^2.5.0

Webpack 版本: ^4.x.x, 对应 easywebpack-vue 版本为 ^4.x.x

Webpack3 版本项目骨架请见 webpack3 分支, 对应 easywebpack-react 版本为 3.x.x

文档

特性

支持服务端渲染SSR(Server Side Render), 前端渲染CSR(Client Side Render) 方式

支持 Node 和 前端代码修改, Webpack 自动编译和热更新, npm run dev 一键启动应用

基于 vue + axios 多页面服务端渲染, 客户端渲染同构实现, 支持 asyncData 渲染

基于 vue + vuex + vue-router + axios 单页面服务器客户端同构实现

支持 js/css/image 资源依赖, 内置支持 CDN 特性, 支持 css/sass/less 样式编写

支持根据 .vue 文件自动创建 Webpack Entry 入口文件

开始支持多进程和缓存编译， 支持 Webpack dll 自动化构建, 与多进程编译结合，构建速度减少 2/3

支持 Vue 组件 import 异步加载, 具体实例请看app/web/page/dynamic

支持服务端渲染(SSR)失败时，自动降级为前端渲染(CSR)模式

提供 国际化 i18n 多语言支持方案

插件

使用

安装cli(非必需)

npm install @easy-team/easywebpack-cli -g

easywebpack-cli 已内置 devDependencies 中, 无需安装。如果你需要在命令行使用 easy 命令, 可以单独全局安装。

安装依赖

npm install

本地开发

npm run dev

应用访问: http://127.0.0.1:7001

[图片上传失败...(image-7223e2-1602485610603)]

本地开发启动 Webpack 构建, 默认配置文件为项目根目录 webpack.config.js 文件。 SSR 需要配置两份 Webpack 配置，所以构建会同时启动两个 Webpack 构建服务。web 表示构建 JSBundle 给前端用，构建后文件目录 public, 默认端口 9000; node 表示构建 JSBundle 给前端用，构建后文件目录