egg.js 与 vue 结合 , 使用脚手架 easywebpack-cli。
了解egg目录结构(koa)
全局安装easywebpack-cli
npm install easywebpack-cli -g
npm 安装过程中反复报错,最后用了cnpm,虽然安装成功,但不知道后面会不会出现其他报错-
项目初始化
easy init
选择项目配置:
配置1:此处选择的是第四个:create server side render project boiloerplate for Egg + Vue...
提示上给的是Use arrow keys
, 我试了一下没用,直接输入4
,然后按enter
。
配置2:create ... egg + vue single page ...
输入1
,然后按enter
另外几个中还有一个是multie page
配置3:projectname / project description / ...
执行完第三步,根据官网提示,进入项目文件夹后直接执行
easy start
或者node index.js
会报错。
错误1 解决办法:
// ${app_root}/config/config.local.js 补充添加如下代码:
const EasyWebpack = require('easywebpack-vue');
module.exports = app => {
...
// 本地开发时,读取 Webpack 配置
exports.webpack = {
webpackConfigList: EasyWebpack.getWebpackConfig()
};
...
return exports;
}
- 运行项目
node index.js
常见错误:
错误2解决办法: 执行
npm install --registry https://registry.npm.taobao.org
类似错误差不多都可以适用
以上是使用easywebpack-cli
进行快速搭建,或者直接clone egg-vue-webpack-boilerplate
GitHub egg-vue-webpack-boilerplate
也可以通过egg-init 手动搭建
参考资源:Egg + Vue 服务端渲染工程化实现