Vue.JS(1)Introduction and Basic Demo

Vue.JS(1)Introduction and Basic Demo

Check the Starter Project
https://github.com/villeristi/vue.js-starter-template

Prepare the ENV
>sudo npm install -g webpack-dashboard
I already have yarn.

Some useful commands
>yarn lint:js
>yarn build
>yarn start

Set up a Sample Projects similar to that.
https://vue-starter.ville.io/
https://github.com/villeristi/vue.js-starter-template

Follow the Doc https://zhuanlan.zhihu.com/p/24837102
>npm --version
3.10.10

>sudo npm install -g vue-cli
Create the first Project
>vue init webpack vue-console

Start the Project
>cd vue-console/
>npm run dev

Visit your page from Here
http://localhost:8082/#/

Build the binary
>npm run build

Unit test >npm run unit
E2E test >npm run e2e
All test >npm test
Compile the grammer > npm run lint

README.md list all the commands.
package.json list all the dependencies
index.html first html file
main.js JS file loader

import Vue from ‘vue’: Vue is the main class
import App from ‘./App’:
new Vue({
el: ‘#app’, // that is the html dom place tag
router,
components: { App },
template: ‘<App/>'
})

Every *.vue file will have 3 parts
<template></template>
<script></script>
<style></style>

Some Basic Loop Operation
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
users: [
{firstname: 'Carl', lastname: 'Luo'},
{firstname: 'Rachel', lastname: 'Kang'},
{firstname: 'Leo', lastname: 'Luo'}
]
}
}
}
</script>

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="(user, index) in users" :key="index">
{{ user.firstname }} {{ user.lastname }}
</li>
</ul>
</div>
</template>

v-model v-text
binding the input the value
<div>
<input type="text" v-model="username">
</div>
<div>
<span v-text="username"></span>
</div>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
users: [
{firstname: 'Carl', lastname: 'Luo'},
{firstname: 'Rachel', lastname: 'Kang'},
{firstname: 'Leo', lastname: 'Luo'}
],
username: ''
}
}
}
</script>

Some other useful documents
http://www.cnblogs.com/keepfool/p/5619070.html
https://github.com/keepfool/vue-tutorials

References:
sample project vue1, ignore
https://github.com/kenberkeley/vue-demo
so cool
https://github.com/villeristi/vue.js-starter-template
Nuxt.js
https://github.com/nuxt/hackernews
Server side rendering
https://github.com/vuejs/vue-hackernews-2.0

documents
https://cn.vuejs.org/v2/guide/index.html
http://www.cnblogs.com/keepfool/p/5619070.html
http://www.cnblogs.com/keepfool/p/5625583.html

useful and full doc
https://github.com/keepfool/vue-tutorials
http://www.cnblogs.com/keepfool/p/5625583.html
http://www.cnblogs.com/keepfool/p/5619070.html