A Vue.js Sandbox project
Reference From https://github.com/ecofic/course-vue-getting-started/tree/master/src
Install vue-devtools
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
npm install -g vue-cli
You can only modify properties You can’t add properties at runtime You can’t remove properties at runtime
Note:Use Primitive values for Props: 123, “abc”, “2017-02-14”, [1, 2, 3]
Note: Do not use ES6 synntax
Binding Text
- Semantic syntax -> {{}} -> Doesnt work too well
- Declarative syntax ->v-???? -> Much better to work with
- One-time bindings -> use it as speed performance
- V-model sound good Text fields input, textarea CheckBox Radio Button Drop Down lists
Ideal for async operation
(Great way to handle BASIC text element) -- Using Methods
Filter | Computed Properties | Methods | Watchers | |
---|---|---|---|---|
React to data changes | Yes | Yes | No | Yes |
Resuable across apps | Yes | No | No | No |
Cached based on dependencies | No | Yes | No | No |
Apprpriate for async operation | No | No | Yes | Yes |
Accepts Parameters | Yes | No | Yes | No |
Fires After creation | Yes | Yes | Possible | No |
Bubble Up (Parent -> Grand Parent) Microsoft idea again , most common Capture Down (Grand Parent -> Parent) -> Maybe with 3rd party component
Axios Components Transitions Routing Statment management Server-Side Rendering
##Deployment
#Firebase npm install -g firebase-tools
Cd Root dir npm run build
#Update the project (thats it) npm run build firebase deploy
firebase.json
{
"hosting": {
"public": "./dist"
}
}
Or HTML5 history Mode
{
"hosting": {
"public": "./dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
npm install firebase vuefire --save
Add in main.js
import VueFire from 'vuefire'
Vue.use(VueFire)