first commit

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [["env",{ "modules": false }]],
+  "plugins": [
+    "transform-object-rest-spread",
+    "syntax-dynamic-import",
+    "transform-object-assign"
+  ],
+  "comments": false
+}

.gitattributes

@@ -0,0 +1,3 @@
+*.js linguist-language=javascript
+*.css linguist-language=javascript
+*.html linguist-language=javascript

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+.happypack/
+node_modules/
+npm-debug.log
+.idea/
+dist
+static
+public
+private
+run
+*.iml
+artifacts.json
+*tmp
+_site
+logs
+app/**/*.js
+config/**/*.js
+index.js
+config/buildConfig.json
+config/manifest.json
+config/manifest-dll.json
+app/view/*
+!app/view/layout.html
+!app/view/README.md
+!app/view/.gitkeep
+package-lock.json
+yarn.lock

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "files.exclude": {
+    "USE_GITIGNORE": true,
+    "**/*.js": {
+      "when": "$(basename).ts"
+    }
+  },
+  "path-intellisense.mappings": {
+    "lib": "${workspaceRoot}/app/web/lib",
+    "asset": "${workspaceRoot}/app/web/asset",
+    "component": "${workspaceRoot}/app/web/component",
+    "page": "${workspaceRoot}/app/web/page",
+    "store": "${workspaceRoot}/app/web/store",
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

History.md

@@ -0,0 +1,6 @@
+
+
+1.0.0 / 2018-01-17
+==================
+
+  * feat:init

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 sky.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,92 @@
+# egg-vue-typescript-boilerplate
+
+基于 Egg + Vue + TypeScript + Element + Webpack4 多页面和单页面服务端客户端渲染同构工程骨架项目, Webpack3 构建请见 [webpack3](https://github.com/hubcarl/egg-vue-typescript-boilerplate/tree/webpack3).
+
+## 1. 版本
+
+- Egg 版本： ^2.x.x
+- Node 版本: Node ^8.x.x+,
+- Webpack 版本: ^4.0.0
+- Vue 版本: ^2.5.0
+- TypeScript: ^2.6.2
+- Element UI
+
+## 2. 文档
+
+- http://hubcarl.github.io/easywebpack/vue/rule
+- https://zhuanlan.zhihu.com/easywebpack
+
+
+## 3. 特性
+
+- 支持 Egg Node 端代码和前端代码 TypeScript 编写和构建
+
+- 支持本地开发 ts-node 运行，本地开发无需运行 tsc 命令
+
+- 支持 async 和 await 特性, Controller 采用 class 方式编写
+
+- 支持 server 和 client 端代码修改, Webpack 时时编译和热更新, `npm run dev` 一键启动应用
+
+- 基于 vue + vuex + vue-router + axios 单页面服务器客户端同构实现
+
+- 支持开发环境, 测试环境，正式环境 Webpack 编译
+
+- 支持 js/css/image 资源依赖, 内置支持CDN特性
+
+- 支持 Webpack DLL 自动化构建
+
+- 支持 Vue 组件服务端渲染异步加载
+
+
+## 4. 依赖
+
+- [easywebpack-vue](https://github.com/hubcarl/easywebpack) ^4.x.x
+- [egg-view-vue-ssr](https://github.com/hubcarl/egg-view-vue-ssr) ^3.0.2
+- [egg-webpack](https://github.com/hubcarl/egg-webpack) ^4.x.x
+- [egg-webpack-vue](https://github.com/hubcarl/egg-webpack-vue) ^2.0.0
+
+## 5. 使用
+
+#### 5.1 安装依赖
+
+```bash
+npm install
+```
+
+#### 5.2 启动应用
+
+```bash
+npm run dev
+```
+
+应用访问: http://127.0.0.1:7001
+
+![npm start启动](https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/master/docs/images/webpack-build.png)
+
+
+#### 5.3 构建文件
+
+- TypeScript Egg 构建
+
+```bash
+npm run tsc
+```
+
+- TypeScript 前端工程构建
+
+```bash
+npm run build
+```
+
+当在本地运行了 `npm run tsc` 之后，本地开发时，记得 `npm run clean` 清楚 js 文件。
+
+#### 5.4 打包部署
+
+1. 先运行 `npm run tsc` 和 `npm run build` 构建 TypeScript Egg 代码和 TypeScript 前端代码
+2. 项目代码和构建代码一起打包代码
+3. 应用部署后，通过 `npm start` 启动应用
+
+
+## License
+
+[MIT](LICENSE)

app/controller/about/about.ts

@@ -0,0 +1,7 @@
+'use strict';
+import { Controller } from 'egg';
+export default class AboutController extends Controller {
+  async index() {
+    await this.ctx.render('about/about.js', { message: 'vue server side render!' });
+  }
+}

app/controller/app/app.ts

@@ -0,0 +1,20 @@
+import { Controller } from 'egg';
+import * as Model from '../../mocks/article/list';
+export default class AppController extends Controller {
+  async index() {
+    await this.ctx.render('app/app.js', {
+      url: this.ctx.url.replace(/\/app/, '')
+    });
+  }
+
+  async list() {
+    const pageIndex = this.ctx.query.pageIndex;
+    const pageSize = this.ctx.query.pageSize;
+    this.ctx.body = Model.getPage(pageIndex, pageSize);
+  }
+
+  async detail() {
+    const id = this.ctx.params.id;
+    this.ctx.body = Model.getDetail(id);
+  }
+}

app/controller/home/home.ts

@@ -0,0 +1,20 @@
+import { Controller } from 'egg';
+import * as Model from '../../mocks/article/list';
+export default class HomeController extends Controller {
+  async index() {
+    const { ctx } = this;
+    await ctx.render('home/index.js', Model.getPage(1, 10));
+  }
+
+  async client() {
+    const { ctx } = this;
+    await ctx.renderClient('home/index.js', Model.getPage(1, 10));
+  }
+
+  async pager() {
+    const { ctx } = this;
+    const pageIndex = ctx.query.pageIndex;
+    const pageSize = ctx.query.pageSize;
+    ctx.body = Model.getPage(pageIndex, pageSize);
+  }
+}

app/middleware/access.ts

@@ -0,0 +1,33 @@
+import * as path from 'path';
+import * as util from 'util';
+export default () => {
+  const skipExt = [ '.png', '.jpeg', '.jpg', '.ico', '.gif' ];
+  return function*(next) {
+    const start = new Date().getTime();
+
+    yield* next;
+
+    const rs = Math.ceil(new Date().getTime() - start);
+
+    this.set('X-Response-Time', rs);
+
+    const ext = path.extname(this.url).toLocaleLowerCase();
+    const isSkip = skipExt.indexOf(ext) !== -1 && this.status < 400;
+
+    if (!isSkip) {
+      const ip = this.get('X-Real-IP') || this.ip;
+      const port = this.get('X-Real-Port');
+      const protocol = this.protocol.toUpperCase();
+      const method = this.method;
+      const url = this.url;
+      const status = this.status;
+      const length = this.length || '-';
+      const referrer = this.get('referrer') || '-';
+      const ua = this.get('user-agent') || '-';
+      const serverTime = this.response.get('X-Server-Response-Time') || '-';
+      const message = util.format('[access] %s:%s - %s %s %s/%s %s %s %s %s %s',
+        ip, port, method, url, protocol, status, length, referrer, rs, serverTime, ua);
+      this.logger.info(message);
+    }
+  };
+};

app/mocks/article/list.ts

@@ -0,0 +1,116 @@
+'use strict';
+const data = {
+  list: [{
+    id: 1,
+    title: 'vue-渐进式JavaScript 框架',
+    summary: '简单小巧的核心，渐进式技术栈，足以应付任何规模的应用',
+    hits: 200,
+    url: 'https://cn.vuejs.org'
+  }, {
+    id: 2,
+    title: 'webpack配置官方文档',
+    summary: 'webpack is a module bundler for modern JavaScript applications.',
+    hits: 550,
+    url: 'https://webpack.js.org/configuration/'
+  }, {
+    id: 3,
+    title: 'egg-为企业级框架和应用而生',
+    summary: 'Born to buildbetter enterprise frameworks and apps with Node.js & Koa',
+    hits: 278,
+    url: 'https://eggjs.org/'
+  }, {
+    id: 4,
+    title: 'axios-基于 Promise 的 HTTP 请求客户端',
+    summary: '基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用',
+    hits: 998,
+    url: 'https://www.awesomes.cn/repo/mzabriskie/axios'
+  }, {
+    id: 4,
+    title: 'Centralized State Management for Vue.js',
+    summary: 'Vuex 是一个专为Vue.js 应用程序开发的状态管理模式',
+    hits: 232,
+    url: 'https://github.com/vuejs/vuex'
+  }, {
+    id: 4,
+    title: 'vue服务器渲染',
+    summary: '服务器渲染可以加快首屏速度,利于SEO',
+    hits: 565,
+    url: 'http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/'
+  }, {
+    id: 4,
+    title: 'webpack服务器构建',
+    summary: 'Webpack is an amazing tool.',
+    hits: 988,
+    url: 'http://jlongster.com/Backend-Apps-with-Webpack--Part-I'
+  }, {
+    id: 4,
+    title: 'vue component loader for Webpack',
+    summary: 'Webpack loader for Vue.js components',
+    hits: 322,
+    url: 'https://github.com/vuejs/vue-loader'
+  }, {
+    id: 4,
+    title: 'vue-router--The official router for Vue.js',
+    summary: 'It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze',
+    hits: 566,
+    url: 'https://github.com/vuejs/vue-router'
+  }, {
+    id: 4,
+    title: 'vue生命周期',
+    summary: 'Vue.js 生命周期和route的生命周期讲解',
+    hits: 434,
+    url: 'http://www.jianshu.com/p/e9f884b6ba6c'
+  }, {
+    id: 4,
+    title: 'babel到底将代码转换成什么鸟样',
+    summary: '将babel捧作前端一个划时代的工具一定也不为过，它的出现让许多程序员幸福地用上了es6新语法',
+    hits: 432,
+    url: 'https://github.com/lcxfs1991/blog/issues/9'
+  }, {
+    id: 4,
+    title: 'HTTP2 的真正性能到底如何',
+    summary: 'HTTP2 的真正性能到底如何',
+    hits: 565,
+    url: 'https://segmentfault.com/a/1190000007219256?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly'
+  }, {
+    id: 4,
+    title: 'HTTP,HTTP2.0,SPDY,HTTPS讲解',
+    summary: '使用SPDY加快你的网站速度',
+    hits: 787,
+    url: 'http://www.alloyteam.com/2016/07/httphttp2-0spdyhttps-reading-this-is-enough/'
+  }, {
+    id: 4,
+    title: 'git - 简明指南',
+    summary: '助你入门 git 的简明指南',
+    hits: 121,
+    url: 'http://rogerdudler.github.io/git-guide/index.zh.html'
+  }, {
+    id: 4,
+    title: 'vue从1升级到2',
+    summary: 'Migrating from v1 to v2',
+    hits: 555,
+    url: 'https://webpack.js.org/guides/migrating/'
+  }]
+};
+
+let id: number = 1;
+
+data.list = data.list.concat(data.list);
+data.list = data.list.concat(data.list);
+
+data.list.forEach((item) => {
+  item.id = id++;
+});
+
+const total = data.list.length;
+export function getPage(pageIndex: number = 1, pageSize: number = 10) {
+  const start = (pageIndex - 1) * pageSize;
+  const end = start + Number(pageSize);
+  return { list: data.list.slice(start, end), total };
+}
+
+export function getDetail(key: number) {
+  return data.list.filter((item) => {
+    return item.id === key;
+  }).slice(0, 1);
+}