這是一個基於 Vue SSR Genesis 框架快速開發的模板例子

時間 2020-02-26

標籤這是一個基於 vue ssr genesis 框架快速開發模板例子简体版

原文原文鏈接

介紹

這是一個基於 Vue SSR Genesis 框架快速開發的模板例子javascript

啓動

# 安裝依賴
npm install
# 開發
npm run dev
# 編譯
npm run build
# 運行編譯後的程序
npm run start

複製代碼

關於 Genesis

這是一個爲 Followme 5.0誕生的Vue SSR框架，也許上線後咱們會開源，也許往後會🔥呢？html

項目的目錄結構

app.vue 頁面入口

<template>
    <div class="app">
        <h2>Vue SSR for Genesis</h2>
        <ol class="list">
            <li class="list-item">頁面標題：{{title}}</li>
            <li class="list-item">服務名稱：{{name}}</li>
            <li class="list-item">渲染地址：{{url}}</li>
            <li class="list-item">官網網站：<a rel="noopener noreferrer" target="_blank" href="https://www.followme.com/">www.followme.com</a></li>
        </ol>
    </div>
</template>
<script lang="ts"> import Vue from 'vue'; import { Component, Prop } from 'vue-property-decorator'; @Component<App>({}) export default class App extends Vue { @Prop({ type: String, required: true }) public name!: string; @Prop({ type: String, required: true }) public title!: string; @Prop({ type: String, required: true }) public url!: string; } </script>
複製代碼

src/entry-client.ts 客戶端入口文件

import App from './app.vue';

const data = window[process.env.GENESIS_NAME!];

export default new App({
    propsData: {
        name: data.name,
        title: data.title,
        url: data.url
    }
});

複製代碼

src/entry-server.ts 服務端入口文件

import { GenesisTypes } from '@fmfe/genesis-core';
import App from './app.vue';

export default (ctx: GenesisTypes.RenderContext) => {
    ctx.data.title = 'vue-genesis-templace';
    return new App({
        propsData: {
            name: ctx.data.name,
            title: ctx.data.title,
            url: ctx.data.url
        }
    });
};
複製代碼

genesis.ts 建立 ssr 實例

import { Genesis } from '@fmfe/genesis-core';

export const ssr = new Genesis({});

複製代碼

genesis.build.ts 源碼編譯

import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new Build(ssr).start();
};
export default start();

複製代碼

genesis.dev.ts 開發模式

import { DevServer } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new DevServer(ssr).start();
};
export default start();

複製代碼

genesis.prod.ts 生產環境

import express from 'express';
import { Renderer } from '@fmfe/genesis-core';
import { ssr } from './genesis';

const start = async () => {
    const app = express();
    const renderer = new Renderer(ssr);
    app.use(renderer.staticPublicPath, express.static(renderer.staticDir, {
        immutable: true,
        maxAge: '31536000000'
    }));
    app.use(renderer.renderMiddleware);
    app.listen(ssr.port, () => console.log(`http://localhost:${ssr.port}`));
};
start();

複製代碼