Onsen-UI 2 + Vue.js 2 + Yii2 Basic Project Template

Maintainers

Details

github.com/onyijne/ovy

Source

Issues

Installs: 45

Dependents: 0

Suggesters: 0

Stars: 6

Watchers: 1

Forks: 685

Open Issues: 0

Language:JavaScript

Type:project

2.1.4 2019-07-25 15:01 UTC

README

68747470733a2f2f6f6e73656e2e696f2f696d616765732f6c6f676f2f7376672f6f6e73656e75695f62616e6e65725f7265642e737667 68747470733a2f2f706e672e69636f6e73382e636f6d2f6d6574726f2f313630302f706c75732d6d6174682e706e67 68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67 68747470733a2f2f706e672e69636f6e73382e636f6d2f6d6574726f2f313630302f706c75732d6d6174682e706e67 993323

Yii 2 + Vue.js + Onsen-UI Project Template


This is a skeleton Onsen UI and Vue.js application integrated with Yii 2 as a backend and view fallback.

The template was built using vue-cli 3, has Vuex, on Vue-router support and contains examples of using Onsen UI with Vue.js and Yii2, with the ability to rapidly develop a native looking ajax powered app with CSRF enabled.

Assets management is done via npm.

DIRECTORY STRUCTURE

  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

REQUIREMENTS

  • Development

The minimum requirement is that your Web server supports PHP 7.1.0. and you have node.js, yarn, vue-cli3 and composer installed

If you do not have Node.js installed you can install it by following the instructions

If you do not have Yarn installed you can install it by following the instructions

If you do not have vue-cli installed you may follow the instruction here

If you do not have Composer, you may install it by following the instructions at getcomposer.org.

  • Production

The minimum requirement is that your Web server supports PHP 7.1.0.

INSTALLATION

  • Install via Composer

You can install this project template using the following command:

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

Then cd ovy/vue-app and run yarn install

Now you should be able to access the application through the following URL, assuming ovy is the directory directly under the Web root. NEVER TRY THIS IN PRODUCTION

http://localhost/ovy/web/
To populate assets use `yarn dev` during developement and `yarn build` for production

CONFIGURATION

Please, check the Yii 2 Basic Project Template and Vue.js configuration sections.

You would also need to edit certain values in vue.config.js file like outputDir and devServer.proxy.target and in store/state.js file like baseApiUrl.dev & baseApiUrl.prod USE IGNITO MODE DURING DEVELOPMENT TO AVOID CACHING ISSUE

You might want to adjust some values in the manifest.json file when in production

CREATE VUE.JS TEMPLATE

You can run console command to get a basic vue.js template for your components

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

It will create a file TestComponent.vue with the following content

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

CONTRIBUTING

Contributions are welcome and will be fully credited.