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
Vue.JS(1)Introduction and Basic Demo
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=326118449&siteId=291194637
Ranking