real world vue

lesson 01

vue cli

npm i -g @vue/cli

vue create real-world-vue
router,vuex
eslint,prettier on save

vue ui

project tour
public
 index.html
src
asset images fonts
components
views
App.vue root components
main.js
router.js
store.js (vuex)

import Vue
import App
import router
import store

npm run build     > builds to dist directory

lesson 03 vscode

extensions

Vetur
ESlist
Prettier

.eslintrc.js
extends add 'plugin:prettier/recommended'

.prettierrc.js
module.exports = {
    singleQuote: true,
    semi: false
}

vscode user settings
vetur.validation.template: false
eslint.validate
eslint.autofixonsave true
editor

"Copy Relative Path"

Snippets Suite
Vue Snippets (Sarah Drasner)

vdata
vprops
vimport

add vetur.completion.useScaffoldSnippets false

lesson 04 Vue Router

Client side routing -> Vue Router

src/router.js

views are the pages


github.com/Code-Pop/real-world-vue

lesson 05

lesson 06
scss
sass-loader
node-sass
vue-loader documentation

style scoped  specifies the attribute to the instance of the component

lesson 07