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 给前端用