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
Vue!
2 configurations:
npm
script to buildvue
output files from source files - this doesn't require any change sincepackage.json
is already having this commandbuild
to output the files to a folder that would be public - create a newvue.config.js
(in project's root directory) and set the path towebroot/vue
,webroot
is the "public" folder of CakePHP (storing CSS/JS/Images/Icons etc), and in this folder a new folder would be created, aptly namedvue
that will contain the compiled files.Note:
build
command generates build when prompted, while during active development the build should be compiled as and when we save the source vue files.To accomplish this, instead of just "build", we add a flag "watch" that watches continuously the changes done to Vue source files, and compiles in the background.
In
package.json
, go to thescripts
part and you will notice that it already contains some scripts, includingbuild
.Duplicate the build script line, and name it
watch
and append--watch
to the end of the command.Change in
package.json
:Contents of the
vue.config.js
file