Edit: The original title of this gist was "Vue from scratch" but soon (actually from the very initial stage) it took the road of "CakePHP and Vue as monorepo". This still contains almost all the Vue specific items as listed below (the 18-point list is not changed, although some of the items are skipped or have notes added in comments). This is a fairly large piece of text + screenshots (to read and see) but not really time consuming to implement (that's what I tell myself, anyway). Happy reading.... caking and vueing... cakueing perhaps!
Thanks to github.com/pankajvashisht-ucreate for the list
Following is the original 18-point list shared by Pankaj Vashisht for someone who is starting in Vue.js from scratch
- Node installation
- Initialization of package.json file
- Basic understanding of script key in package.json file
- Install vuejs
- Vue file initialization with vue instance
- Understanding of vue.use methods
- Vue router
- Vue lifecycle (Hooks)
- Design Pattern
- How to create component in the vuejs
- Vue html Attributes (Very Important)
- Two way binding
- Data pass parent to child and child to parent (Props)
- Understanding the concept of $emit in the vue js
- Vue js slot
- Vue js Object keys in details
- VueStore for data sharing
- How deploy the Vue js App
The layout file
templates/layout/vue-layout.php
is modified at 2 places:Router
class is includedbody
tag is closed, 2 script tags are introduced loading theapp.js
andchunk-vendors.js
files from the compiled files created somewhere above (probably still compiling in the background) when the commandnpm run watch
was executed.Light/Normal mode home page now looks like this (ignore the missing logo, the file path is the issue, this layout will be updated, and the logo would be moved to somewhere else):
Removed the text from the "view" file
templates/Pages/vue.php
Now the page looks more clean (the bottom-right logo is of CakePHP debugKit - for debugging in development environments, ignore that as well):