Note19 egg+ vue项目搭建入坑

egg.js 与 vue 结合 , 使用脚手架 easywebpack-cli。

  1. 了解egg目录结构(koa)

  2. 全局安装easywebpack-cli npm install easywebpack-cli -g
    npm 安装过程中反复报错,最后用了cnpm,虽然安装成功,但不知道后面会不会出现其他报错

  3. 项目初始化 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 / ...

    选择配置

  4. 执行完第三步,根据官网提示,进入项目文件夹后直接执行 easy start 或者 node index.js会报错。

错误1

错误1 解决办法:

//  ${app_root}/config/config.local.js 补充添加如下代码:
const EasyWebpack = require('easywebpack-vue');

module.exports = app => {
...
//  本地开发时,读取 Webpack 配置
  exports.webpack = {
    webpackConfigList: EasyWebpack.getWebpackConfig()
  };
...
return exports;
}
  1. 运行项目 node index.js
    http://127.0.0.1:7001

常见错误:

错误2

错误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 服务端渲染工程化实现

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容