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
To make things easier while designing the UI (HTML/CSS) I use TailwindCSS framework, so I am adding some instructions to set that up as well. If you do not use it - then please explain "WHY THE HELL NOT?"
npm install tailwindcss
ornpm i tailwindcss
A new
npm
script is added calledtailwind
and the script istailwind build src/tailwind.css -o webroot/css/style-tw.css
What this command is doing/saying is
"Hey
tailwind
,build
from the source file atsrc/tailwind.css
and generate output (
-o
) css fileat
webroot/css/style-tw.css
"The source file at
src/tailwind.css
contains following code (copied directly from tailwind's official documentation):The
package.json
file now looks like this: