├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .stylelintignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── genesis.build.ts ├── genesis.dev.ts ├── genesis.prod.ts ├── genesis.ts ├── package.json ├── src ├── app.vue ├── entry-client.ts ├── entry-server.ts └── shims-vue.d.ts ├── stylelint.config.js └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | #缩进风格：空格 6 | indent_style = space 7 | #缩进大小 8 | indent_size = 4 9 | #换行符lf 10 | end_of_line = lf 11 | #字符集utf-8 12 | charset = utf-8 13 | #是否删除行尾的空格 14 | trim_trailing_whitespace = true 15 | #是否在文件的最后插入一个空行 16 | insert_final_newline = true 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/** 2 | node_modules/** 3 | .fm-genesis/** 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | require.resolve('@fmfe/genesis-lint') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | **.log 3 | dist/** 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | *.json 2 | *.js 3 | *.ts 4 | *.png 5 | *.eot 6 | *.ttf 7 | *.woff -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // 使用项目配置规则 3 | "eslint.options": { 4 | "configFile": "./.eslintrc.js" 5 | }, 6 | "editor.codeActionsOnSave": { 7 | "source.fixAll.eslint": true, 8 | "source.fixAll.stylelint": true 9 | }, 10 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Followme Frontend Team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 介绍 2 | 这是一个基于 Vue SSR Genesis 框架快速开发的模板例子 3 | 4 | ## 启动 5 | ```base 6 | # 安装依赖 7 | yarn 8 | # 开发 9 | yarn dev 10 | # 编译 11 | yarn build 12 | # 运行编译后的程序 13 | yarn start 14 | 15 | ``` 16 | 17 | ## 关于 Genesis 18 | 这是一个为 [Followme 5.0](https://www.baidu.com/s?&wd=Followme+5.0)诞生的Vue SSR框架，也许上线后我们会开源，也许日后会🔥呢？ 19 | -------------------------------------------------------------------------------- /genesis.build.ts: -------------------------------------------------------------------------------- 1 | import { Build } from '@fmfe/genesis-compiler'; 2 | import { ssr } from './genesis'; 3 | 4 | const start = () => { 5 | /** 6 | * 创建一个编译实例 7 | */ 8 | const build = new Build(ssr); 9 | /** 10 | * 开始执行编译程序，构建生产环境应用包 11 | */ 12 | return build.start(); 13 | }; 14 | start(); 15 | -------------------------------------------------------------------------------- /genesis.dev.ts: -------------------------------------------------------------------------------- 1 | import { Watch } from '@fmfe/genesis-compiler'; 2 | import { ssr, app, startApp } from './genesis'; 3 | 4 | const start = async () => { 5 | /** 6 | * 创建一个观察实例 7 | */ 8 | const watch = new Watch(ssr); 9 | /** 10 | * 启动观察 11 | */ 12 | await watch.start(); 13 | /** 14 | * 拿到观察实例上对应的渲染器 15 | */ 16 | const renderer = watch.renderer; 17 | /** 18 | * 开发的中间件 19 | */ 20 | app.use(watch.devMiddleware); 21 | /** 22 | * 热更新的中间件 23 | */ 24 | app.use(watch.hotMiddleware); 25 | /** 26 | * 拿到渲染器后，启动应用程序 27 | */ 28 | startApp(renderer); 29 | }; 30 | start(); 31 | -------------------------------------------------------------------------------- /genesis.prod.ts: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import { ssr, app, startApp } from './genesis'; 3 | 4 | /** 5 | * 生产环境，应用程序我们已经编译好了，所以在这里可以直接创建一个渲染器 6 | */ 7 | const renderer = ssr.createRenderer(); 8 | 9 | /** 10 | * 生产环境，静态资源都是基于内容哈希生成的文件名，所以这里设置静态目录的时候，设置强缓存即可 11 | */ 12 | app.use( 13 | renderer.staticPublicPath, 14 | express.static(renderer.staticDir, { 15 | immutable: true, 16 | maxAge: '31536000000' 17 | }) 18 | ); 19 | 20 | /** 21 | * 启动应用 22 | */ 23 | startApp(renderer); 24 | -------------------------------------------------------------------------------- /genesis.ts: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import { SSR, Renderer } from '@fmfe/genesis-core'; 3 | 4 | /** 5 | * 创建一个应用程序 6 | */ 7 | export const app = express(); 8 | 9 | /** 10 | * 创建一个 SSR 实例 11 | */ 12 | export const ssr = new SSR(); 13 | 14 | /** 15 | * 拿到渲染器后，启动应用程序 16 | */ 17 | export const startApp = (renderer: Renderer) => { 18 | /** 19 | * 使用默认渲染中间件进行渲染，你也可以调用更加底层的 renderer.renderJson 和 renderer.renderHtml 来实现渲染 20 | */ 21 | app.use(renderer.renderMiddleware); 22 | /** 23 | * 监听端口 24 | */ 25 | app.listen(3000, () => console.log(`http://localhost:3000`)); 26 | }; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-genesis-template", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "ts-node genesis.dev -p=tsconfig.json", 8 | "build": "rm -rf dist && NODE_ENV=production ts-node genesis.build -p=tsconfig.json", 9 | "start": "NODE_ENV=production ts-node genesis.prod -p=tsconfig.json", 10 | "lint": "npm run lint:js && npm run lint:css", 11 | "lint:js": "fm-eslint . --ext .js,.ts,.vue --fix", 12 | "lint:css": "fm-stylelint . --syntax less --fix --ignore-path ./.stylelintignore | fm-stylelint . --custom-syntax postcss-html --fix" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/fmfe/vue-genesis-template.git" 17 | }, 18 | "author": "Followme", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/fmfe/vue-genesis-template/issues" 22 | }, 23 | "homepage": "https://github.com/fmfe/vue-genesis-template#readme", 24 | "husky": { 25 | "hooks": { 26 | "pre-commit": "lint-staged" 27 | } 28 | }, 29 | "lint-staged": { 30 | "*.{ts,js}": [ 31 | "fm-eslint --ext .js,.ts --fix", 32 | "git add" 33 | ], 34 | "*.{css,less}": [ 35 | "fm-stylelint --syntax less --fix", 36 | "git add" 37 | ], 38 | "*.{vue}": [ 39 | "fm-eslint --ext .js,.ts --fix", 40 | "fm-stylelint --custom-syntax postcss-html --fix", 41 | "git add" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@fmfe/genesis-compiler": "1.0.3", 46 | "@fmfe/genesis-lint": "1.0.3" 47 | }, 48 | "dependencies": { 49 | "@fmfe/genesis-core": "1.0.3", 50 | "@types/express": "^4.17.3", 51 | "@types/node": "^13.7.6", 52 | "express": "^4.17.1", 53 | "ts-node": "^8.6.2", 54 | "typescript": "^3.8.2" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 9 | 30 | 41 | -------------------------------------------------------------------------------- /src/entry-client.ts: -------------------------------------------------------------------------------- 1 | import { ClientOptions } from '@fmfe/genesis-core'; 2 | import Vue from 'vue'; 3 | import App from './app.vue'; 4 | 5 | export default async (clientOptions: ClientOptions): Promise => { 6 | return new Vue({ 7 | render(h) { 8 | return h(App); 9 | } 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /src/entry-server.ts: -------------------------------------------------------------------------------- 1 | import { RenderContext } from '@fmfe/genesis-core'; 2 | import Vue from 'vue'; 3 | import App from './app.vue'; 4 | 5 | export default async (context: RenderContext): Promise => { 6 | return new Vue({ 7 | render(h) { 8 | return h(App); 9 | } 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | require.resolve('@fmfe/genesis-lint/stylelint.config') 4 | ], 5 | rules: { 6 | // 添加你的自定义规则 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "esModuleInterop": true, 7 | "experimentalDecorators": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "noUnusedLocals": true, 13 | "skipLibCheck": true, 14 | "noImplicitAny": false, 15 | "resolveJsonModule": true, 16 | "baseUrl": "./", 17 | "typeRoots": [ 18 | "./types/*" 19 | ], 20 | "types": [ 21 | "@types/node" 22 | ], 23 | "allowSyntheticDefaultImports": true 24 | }, 25 | "ts-node": { 26 | "compilerOptions": { 27 | "target": "es2018", 28 | "module": "commonjs", 29 | "moduleResolution": "node", 30 | "allowSyntheticDefaultImports": true, 31 | "declaration": true, 32 | "esModuleInterop": true, 33 | "outDir": "../dist" 34 | } 35 | } 36 | } --------------------------------------------------------------------------------