Vue.js Notebook

Start

1. Download node and install;
2. Download vue;

~> npm install -g @vue/cli

Create Vue Project

~> vue create testPrj

Start Web Server, Run the App

~> cd testPrj
testProj~> npm run serve

starts web server and your app at localhost:8080

Stop server and run GUI version of the Vue App Server

~> vue ui

starts dashboard at localhost:8000

Architecture

• Renderer is <div id="app" /> in public/index.html
• Main engine is the src/main.js file, imports vue and App object
• App.vue file as an example:

<template>
	<div id="app">
		All view here.
		<Header /> <!-- Component; Navigation etc. -->
	</div>
<template>

<script>
	// Header.js in that folder holds the similar architechture.
	import Header from './componentes/layout/Header' 
	// sending up to the view
	export default { 
		name: "app",
		components: {
			Header
		}
	}
</script>

<!-- scoped parameter (optional) means those 
     style are scoped only by this page. -->
<style scoped>
/* Standard CSS */
</style>

• Header.vue object imported by App.vue

<template>
	<header class="header">
		<h1>TodoList</h1>
		<div id="nav">
			<!-- Routers gets installed as plugins
			     by Vue App Server Dashboard  -->
		  <router-link to="/">Home</router-link> |
		  <router-link to="/about">About</router-link>
		</div>
	</header>
</template>

<script>
	export default {
		name: "Header"
	}
</script>

<!-- scoped parameter (optional) means 
     those style are scoped only by this page. -->
<style scoped>
	header {
		background-color: teal;
	}
	/* ... */
</style>

Routing

to be continued…

---

Cheat Sheet:

• https://appletree.or.kr/quick_reference_cards/JavaScript/Vue.js%20Cheat%20Sheet.pdf
• https://shortcode.dev/vue-cheatsheet