README

版本 ^0.1.0 适用于 CodeIgniter 4 应用程序中的 Vue 3 使用

对于 CodeIgniter 4 应用程序中的 Vue 2 使用，您可以使用版本 ~0.0.17

简介

一个具有 Vue.js 集成的 CodeIgniter 4 骨架应用程序。

特性

• 带有 Vue Router 的单页应用程序，访问后缓存页面。
• 使用 CodeIgniter 4 服务器端模板，在 Vue.js 组件的 render() 中使用 Vue.compile() 编译。
• 使用 Vuex 作为状态管理库，与投资组合页面上的 sessionStorage 组合。
• 支持 生产 的 Webpack

设置

1. 运行 composer create-project 命令

composer create-project samsonasik/ci4-vue

2. 将文件 ci4-vue/env 复制到 ci4-vue/.env

cp ci4-vue/env ci4-vue/.env

3. 设置环境和应用程序配置

打开 ci4-vue/.env 并设置 CI_ENVIRONMENT、app.baseURL、app.indexPage

# file ci4-vue/.env
CI_ENVIRONMENT = development

app.baseURL    = 'http://localhost:8080'
app.indexPage  = ''

4. 运行 PHP 开发服务器

# go to ci4-vue directory
cd ci4-vue

# run php development server inside ci4-vue directory
php spark serve

5. 打开网页浏览器 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: 8e63a0daee1be975aeb3
Version: webpack 4.43.0
Time: 469ms
Built at: 07/02/2020 6:13:41 PM
                   Asset     Size  Chunks             Chunk Names
public/js/dist/bundle.js  2.7 KiB       0  [emitted]  main
Entrypoint main = public/js/dist/bundle.js
[0] ./public/js/app.js + 4 modules 3.85 KiB {0} [built]
    | ./public/js/app.js 772 bytes [built]
    | ./public/js/create-page.js 924 bytes [built]
    | ./public/js/portfolio.js 1.67 KiB [built]
    | ./public/js/store.js 183 bytes [built]
    | ./public/js/portfolio-store-module.js 353 bytes [built]

生成后，我们可以按照以下方式更新 .env 文件

# file .env
CI_ENVIRONMENT = production

app.baseURL    = 'https://www.your-website.com'
app.indexPage  = ''

在 app/Views/layout.php 中，我们有一个 ENVIRONMENT 检查，在开发时使用 js/app.js，在存在时在生产上使用 /js/dist/bundle.js。

// src/App/templates/layout/default.phtml
<?php $isDevelopment = ENVIRONMENT === 'development'; ?>

// ...
    <script src="<?php echo base_url($isDevelopment
            ? '/js/app.js'
            : (
                // when after run webpack, allow to use bundled js
                // fallback to use /js/app.js when not
                file_exists(ROOTPATH . 'public/js/dist/bundle.js')
                    ? '/js/dist/bundle.js'
                    : '/js/app.js'
            )) ?>" type="module"></script>
// ...

它会自动处理。