Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。
Vue
安裝
Vue CLI 類似于 IDE 中的 New Project，可以快速創建一個新的工程，
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
安裝時建議使用國內鏡像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
項目結構
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app"/>
</body>
</html>
mian.js
import Vue from 'vue'
// 導入 Hello 組件，并命名為 APP
import APP from './components/Hello'
// 創建實例
new Vue({
// 掛載到 index.html 的 id 為 app 元素
el: '#app',
template: '<APP/>',
components: { APP },
})
// main.js 中的 template 和 components 兩個屬性不能少
Hello.vue
<template>
<!-- 只能有一個根元素 -->
<p>{{ name }} 你好！</p>
</template>
<script>
// 導出對象
export default {
data () {
return {
name: '世界'
}
}
}
</script>
<style>
p {
color: red
}
</style>
ECMAScript 6 模塊系統
無論使用何種編程語言開發大型應用，最關鍵的特性就是代碼模塊化。這個概念在不同的編程語言里有著不同的命名，在C里為頭部文件，C++和C#里為命名空間，Java中為包，名稱不一樣但解決的是同一問題。
使用關鍵字 default，可將對象標注為 default 對象導出。default 關鍵字在每一個模塊中只能使用一次；
關鍵字export default后可跟隨任何值：一個函數、一個類、一個對象字面量，只要你能想到的都可以。
export default {
// ES6 function 函數簡寫
data () {
return {
name: 'Vue'
}
}
}
Node 模塊化方案
module.exports = {
data: function () {
return {
name: 'Vue'
}
}
}
