vue-egg-framework

说明

vue + egg + egg-view-vue-ssr 构建的基础框架，为开发者提供方便快速构建项目的能力。

• 支持客户端渲染、服务端渲染。
• 支持pm2部署、docker部署。
• 支持单页面、多页面应用。

安装依赖

npm install

项目构建

npm run build

启动服务

npm run dev 本地启动(dev环境) npm run prod 本地启动(prod环境) npm run pm2 生产环境启动(prod环境)

关闭服务

pm2 stop vue-egg-framework

docker部署

docker build -t xxx/egg-view-vue-ssr:1.0 . docker push xxx/egg-view-vue-ssr:1.0 docker run -d -p 8248:8248 xxx/egg-view-vue-ssr:1.0

目录结构

├── app                                // app 目录下多数文件的结构请参考 egg 文档，不做解释  
│   ├── controller
│   │   ├── test
│   │   │   └── test.js
│   ├── extend
│   ├── lib
│   ├── middleware
│   ├── mocks
│   ├── build                           // 编译后的 bundle.js 存放路径，也是 ctx.render 实际读取的路径
│   ├── proxy
│   ├── router.js                       // 路由配置
│   ├── view                            // 除了公用资源，前端工程都包含在这个目录中
│       ├── app                         // 单页应用入口，可以存放多个单页应用
│       │   └── main                    // 默认的应用，如果有多个应用需求，参考 本文档的 “多应用配置” 部分   
│       │       ├── app.js              // 应用入口
│       │       ├── app.vue             // 应用框架
│       │       ├── images              // 应用图片
│       │       ├── app.scss            // 应用样式
│       │       ├── component           // 应用组件，单页应用里面对应的就是页面
│       │       │   ├── index.vue
│       │       │   └── music.vue
│       │       └── router.js           // 前端路由
│       ├── component                    // 公用组件
│       │   └── loading
│       │       └── loading.scss
│       │       └── loading.vue
│       ├── layout
│       │   └── yi-layout.html           // 用于根据指定的 layout 生成对应的html页面
│       ├── page                         // 多页面，前端页面和webpack构建目录, 也就是webpack打包配置entryDir
│       │   └── home                     // 每个页面遵循目录名, js文件名, scss文件名, vue文件名相同
│       |       └── home.scss
│       │       └── home.vue
│       │       └── images               // 页面自有图片。 公共图片和css，请放到 app/assets 下面
│       │           └── icon_more.png
│       │       └── component            // 页面自有组件。 公共组件，请放到 app/view/component 下面
│       └── store                        // 引入vuex 的基本规范, 可以分模块
├── config
│   ├── config.default.js
│   ├── config.local.js
│   ├── config.prod.js
│   ├── config.test.js
│   └── plugin.js
├── doc
├── index.js                               // 应用入口文件
├── public                                 // 公开可访问的资源，也是 webpack 编译目录，存放客服端需要的文件。
│   ├── manifest.json                      // 资源依赖表
│   ├── static
│   │   ├── css
│   │   │   ├── home
│   │   │   │   ├── home.07012d33.css
│   │   │   └── test
│   │   │       ├── test.4bbb32ce.css
│   │   ├── img
│   │   │   ├── change_top.4735c57.png
│   │   │   └── intro.0e66266.png
│   ├── xlsx
│   │   └── total.xlsx
│   └── vendor.js                         // 生成的公共打包库，webpack config 中的 dll 配置决定