README

版本 ^0.1.0 适用于 Mezzio 应用中的 Vue 3 使用

对于 Mezzio 应用中的 Vue 2 使用，您可以使用版本 ~0.0.3

简介

一个带有 Vue.js 集成的 Mezzio 3 骨架应用程序。

特性

• 具有 Vue Router 的单页应用程序，访问后缓存页面。
• 使用 Mezzio 的服务器端模板，在 Vue.js 组件的 render() 中使用 Vue.compile() 编译。
• 使用 Vuex 进行状态管理库，与投资组合页面上的 sessionStorage 结合使用。

设置

1. 运行 composer create-project 命令

composer create-project samsonasik/mezzio-vue
composer development-enable

2. 运行 PHP 开发服务器

cd mezzio-vue
composer serve

3. 打开网络浏览器 http://localhost:8080

生产环境

为了部署到生产环境，根目录中包含 webpack.config.js 文件。当运行 webpack 命令时，运行后会得到 public/js/dist/bundle.js。如果您系统中尚未安装 webpack，您可以使用 nodejs 安装 webpack 和 webpack-cli

sudo npm install -g webpack
sudo npm install -g webpack-cli

所以，我们可以运行

webpack

Hash: 6ed53cca3add09d67d7f
Version: webpack 4.43.0
Time: 462ms
Built at: 06/22/2020 5:14:09 PM
                   Asset     Size  Chunks             Chunk Names
public/js/dist/bundle.js  2.94 KiB       0  [emitted]  main
Entrypoint main = public/js/dist/bundle.js
[0] ./public/js/app.js + 7 modules 4.09 KiB {0} [built]
    | ./public/js/app.js 856 bytes [built]
    | ./public/js/home.js 103 bytes [built]
    | ./public/js/about.js 360 bytes [built]
    | ./public/js/contact.js 112 bytes [built]
    | ./public/js/portfolio.js 1.36 KiB [built]
    | ./public/js/store.js 176 bytes [built]
    | ./public/js/create-page.js 872 bytes [built]
    | ./public/js/portfolio-store-module.js 319 bytes [built]

生成后，我们可以运行以下命令以默认获取 production 环境

# ensure no left over file development config
rm config/development.config.php && rm config/autoload/development.local.php

# install with --no-dev
composer install --no-dev

# ensure no left over file cache before re-build cache
composer clear-config-cache

在 default.phtml 中，我们有一个 isDevelopment() 视图助手检查，用于在开发时使用 js/app.js，当存在时，在生产环境中使用 /js/dist/bundle.js。

// src/App/templates/layout/default.phtml
$isDevelopment = $this->isDevelopment();

// ...
    ->prependFile(
        $isDevelopment
            ? '/js/app.js'
            : (
                // when after run webpack, allow to use bundled js
                // fallback to use /js/app.js when not
                file_exists('./public/js/dist/bundle.js')
                    ? '/js/dist/bundle.js'
                    : '/js/app.js'
            ),
        'module'
    )
// ...

它将自动处理。