1.0.7 • Published 4 years ago

egg-vue-framework v1.0.7

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

egg-vue-framework

egg与vue-cli组合共同构建项目

Demo - 可以直接使用的后台样板项目

一个基于egg 和 vue-manage-system UI 搭建的 后台样板项目,可以直接克隆下来使用 https://github.com/u404/egg-vue-manage-system

QuickStart

  1. 使用创建egg项目
$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i
  1. 安装egg-vue-framework框架,并配置
$ npm install egg-vue-framework
// package.json中
{
  ...
  "egg": {
    "framework": "egg-vue-framework"
  },
  ...
  "scripts": {
    // script 参考如下
    // 在本地运行npm run start 命令时,必须明确指定NODE_ENV 或 EGG_SERVER_ENV 为非local的值,另外,执行start前,必须先执行过build
    "start": "cross-env EGG_SERVER_ENV=prod && egg-scripts start --daemon --title=egg-server-test",
    "stop": "egg-scripts stop --title=egg-server-test",
    "dev": "egg-bin dev",
    // 添加build命令,用于构建vue代码
    "build": "node node_modules/egg-vue-framework/lib/build.js"
  }
}
  1. 集成vue项目目录
  • 目前只支持vue项目的默认的单页构建模式
  • 在项目目录/app中,创建web目录,可以直接拷贝已有的vue项目或在此目录下用vue-cli初始化vue应用
  • 将vue目录的babel.config.js 和 postcss.config.js 从web目录移到项目根目录,web目录中基本只保留vue.config.js 和eslintrc的配置文件
  • 在app/web目录中的vue.config.js中指定,publicPath: 'web/',另外,当前版本不支持手动配置:outputDir、assetsDir、indexPath、pages 这些对编译资源结构有较大影响的选项。
  1. 调试运行
npm run dev
// 项目启动端口为8001,本地调试运行另外会同时启动8002作为devServer服务器
  1. 部署项目
npm run build   // 在执行start命令前,必须先build
npm run start