README

Yii 2 + Vue.js + Onsen-UI 项目模板

这是一个基于 Onsen UI 和 Vue.js 应用程序框架，集成了 Yii 2 作为后端和视图回退的骨骼。

模板使用 vue-cli 3 构建，包含 Vuex、Vue-router 支持，并包含使用 Onsen UI 与 Vue.js 和 Yii2 的示例，能够快速开发出具有原生外观的、支持 CSRF 的 Ajax 应用程序。

通过 npm 进行资产管理。

目录结构

  assets/             contains assets definition
  commands/           contains console commands (controllers)
  config/             contains application configurations
  controllers/        contains Web controller classes
  mail/               contains view files for e-mails
  models/             contains model classes
  modules/            contains application modules
  node_modules        contains npm packages
  runtime/            contains files generated during runtime
  vue-app/            contains the onsen-ui and vue.js templates
  tests/              contains various tests for the basic application
  vendor/             contains dependent 3rd-party packages
  views/              contains view files for the Web application
  web/                contains the entry script and Web resources

需求

• 开发

最低要求是您的 Web 服务器支持 PHP 7.1.0，并且您已安装 node.js、yarn、vue-cli3 和 composer

如果您尚未安装 Node.js，可以按照以下说明进行安装：安装 Node.js

如果您尚未安装 Yarn，可以按照以下说明进行安装：安装 Yarn

如果您尚未安装 vue-cli，可以按照以下说明进行安装：安装 vue-cli

如果您尚未安装 Composer，可以按照以下说明进行安装：安装 Composer

• 生产

最低要求是您的 Web 服务器支持 PHP 7.1.0。

安装

• 通过 Composer 安装

您可以使用以下命令安装此项目模板：

    php composer create-project --prefer-dist --stability=dev onyijne/ovy ovy

然后 cd ovy/vue-app 并运行 yarn install

现在您应该可以通过以下 URL 访问应用程序，假设 ovy 是 Web 根目录下的目录。 请勿在生产环境中尝试此操作

http://localhost/ovy/web/

To populate assets use `yarn dev` during developement and `yarn build` for production

配置

请检查 Yii 2 Basic Project Template 和 Vue.js 配置部分。

您还需要编辑 vue.config.js 文件中的某些值，如 outputDir 和 devServer.proxy.target，以及 store/state.js 文件中的 baseApiUrl.dev & baseApiUrl.prod 开发期间请使用 IGNITO 模式以避免缓存问题

在生产环境中，您可能需要调整 manifest.json 文件中的某些值

创建 Vue.js 模板

您可以通过运行控制台命令来获取组件的基本 Vue.js 模板

php yii make/template --path=app/pages/TestComponent.vue

它将创建一个名为 TestComponent.vue 的文件，其中包含以下内容

    <template>
         <div>
 
         </div>
     </template>
 
     <script>
         export default {
           data() {
             return {
             }
           },
         mounted: function () {
 
         },
         methods: {
 
         },
         watch: {
 
         }
       }
     </script>

贡献

贡献是 欢迎 的，并且将得到 充分 的认可。