Hello everyone. In this post, I explain how to use Vue.js to make rich UI in Concrete5 package. At there, I write the process that create vue project in C5 package directory and use compiled js file.
I assumed Readers know how to customize C5 packages and basic C5 knowledge.The C5’s version is 8.4+ in this post.
Reason is simple. Because making rich UI with PHP(C5 system) and jquery is so hard. C5 prepares helper to print form as below.
// Read Helper
$form = Core::make('helper/form');
//input type of text
echo $form->text($name, $default_value);
//text area
echo $form-> textarea($name, $default_value);
// File manager
$file_selector = Core::make('helper/concrete/file_manager');
echo $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);
When I write them on page view.php, forms are shown as below.
Input text, textarea and C5’s file manager appeared. These has name property and can post data.
Simply forms are enough to use them. But,
These implication is hard with only jquery and PHP.
Many Rich Form’s UI are developed easily with Vue.js, React.js and backbone.js( which manage data state and HTML template by javascript.) Using those libraries, we can develop rich UI while reducing the number of development days.
Let’s make package has UI built by vue. Create custom package directory named ‘vuetest’ under /package . Directory structure as below.
documentroot $ cd ./package
package $ mkdir vuetest && touch ...
package $ tree vuetest
./
└── vuetest
├── controller.php
├── controllers
│ └── single_page
│ └── dashboard
│ └── vuetest.php
├── db.xml
├── icon.png
├── js
│
└── single_pages
└── dashboard
└── vuetest
└── view.php
Under package/vuetest, there are package controller file, single page file that shows UI. Then let’s create js directory and make vue project there, named as ‘packageui’.
package $ cd vuetest/js
js $ vue create packageui
Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint) #default
Vue CLI v4.4.6
✨ Creating project in documentroot/vuetest/js/packageui.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
🎉 Successfully created project packageui.
js $ cd packageui && tree -L 1
.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
Vue project has been created successfully! Next, create vue.config.js and write webpack setting for C5’s asset system.
packageui $ touch vue.config.js
module.exports = {
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
},
}
This file configs that the name of compiled js files from vue file when running npm run build will be same name under the /dist
directory.
When we build vue file on initial webpack config, built js file has been had hashed letters such as app384#34a.js . The hash will change at every build. Compiled js file name must be always same to be read by C5’s asset system. So I config that file.
In this time, I create dedicated vue project under the package called vuetest and its directory. But if you use it by multi packages, create /js
directory under /application
directory and make vue project under /application/js
When running build with vue cli, compiled js file will be generated under /dist
directory. Let’s config as C5 system and page renders components can read that files!
By the way, build main.js
. That file renders App component at page contains div element with id attribute named as ‘app’.
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
packageui $ npm run build
.
├── README.md
├── babel.config.js
├── dist
│ ├── app.js
│ ├── app.js.map
│ ├── chunk-vendors.js
│ ├── chunk-vendors.js.map
│ ├── css
│ ├── favicon.ico
│ ├── img
│ └── index.html
├
Build succeeded. Some files are not needed, but it is just ok to config as reading app.js
and chunk-vendor.js
To read those js files, write some PHP script in package’s install controller php file (package/vuetest/controller.php
)
<?php
namespace Concrete\Package\Vuetest;
defined('C5_EXECUTE') or die('Access Denied.');
use \Concrete\Core\Asset\AssetList;
use \Concrete\Core\Asset\Asset;
class Controller extends \Concrete\Core\Package\Package {
protected $pkgHandle = 'vuetest';
protected $appVersionRequired = '5.7.4';
protected $pkgVersion = '1.0.0';
public function on_start()
{
$al = AssetList::getInstance();
$al->register(
'javascript', 'package-vue-build', 'js/packageui/dist/app.js',
array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),
$this->pkgHandle
);
$al->register(
'javascript', 'package-vue-chunk', 'js/packageui/dist/chunk-vendors.js',
array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),
$this->pkgHandle
);
$al->registerGroup('package-vue-production', array(
array('javascript', 'package-vue-build'),
array('javascript', 'package-vue-chunk'),
));
}
...
}
$al->register
registers those two js files referred by path at controller of vuetest package. For simply asset reading, let’s group two files as name of package-vue-production .
C5 has asset registering/reading system like this. Using this system, we can use registered files anywhere pages without file path problem. Now, we have registered js files, so next we set reading them on the page.
Write PHP script in vuetest/single_pages/dashboard/vuetest/view.php
as below
<?php
namespace Concrete\Package\Vuetest\Controller\SinglePage\Dashboard;
defined('C5_EXECUTE') or die('Access Denied.');
use \Concrete\Core\Page\Controller\DashboardPageController;
class Vuetest extends DashboardPageController
{
public $packageHandle = 'vuetest';
public function view() {
$this->requireAsset('package-vue-production');
$this->set('success', 'My success message');
}
}
$this->requireAsset('package-vue-production');
orders page controller that ‘Read registered asset name as “package-vue-production”
on this page(view.php
)!‘
After setting, let’s search if the js files are read. Opening Chrome developer tool…
Path /packages/vuetest/js/dist/**
are found! Next, create div element has id="app"
and see the page again.
Invuetest/single_pages/dashboard/vuetest/view.php
<?php
defined('C5_EXECUTE') or die('Access Denied.');
?>
<div id="app"></div>
Reload page…
Vue component (App) are rendered successfully!! Some image and layout dose not work because the paths for img and css are incorrect. But created vue component itself with vue CLI are read and appeared on target page.
The above is the method to create a vue project on the concrete5 package and combine them. Setting to use vue has been readied, so next step, we create form to input data ,flow to register data in DB and registered data editing page .
コメント
コメント読み込み中..