官方下載點提供 Development 和 Production 版本，除了壓縮外，差在是否顯示 Vue 警告和錯誤訊息。
習慣套件管理工具的也可透過 NPM、Bower 安裝
npm install vue
bower install vue
使用上有兩種不同作法：
不需要透過編譯，跟平常載入 jQuery 或其他 Library 一樣，上網發問也得仰賴它。
參考官方範例
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app",
data: {
message: 'vue rock!'
}
})
</script>
</body>
如果有組件定義，以前一篇的 <menu-section> 為例
<body>
<div id="app">
{{ message }}
<menu-section></menu-section>
</div>
<template id="menuTemplate">
<ul>
<li v-for="item in menuItems">{{ item.text }}</li>
</ul>
</template>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'vue rock!'
},
/* 局部註冊 (Local Registration) */
components: {
'menu-section': {
template: '#menuTemplate', /* 樣板選取器 */
data: function() {
return {
menuItems: [{
text: 'About me'
}, {
text: 'Articles'
}, {
text: 'contact'
}]
}
}
}
}
})
</script>
</body>
前一種用法 template 與 html 混在一起，想必看得不太舒服吧？.vue (Vue file) 還你 html 最初的白淨透亮。
/* Menu.vue */
<template>
<ul>
<li v-for="item in menuItems">{{ item.text }}</li>
</ul>
</template>
<script>
export default {
data: function() {
return {
menuItems: [{
text: 'About me'
}, {
text: 'Articles'
}, {
text: 'contact'
}]
}
}
}
</script>
<style>
/* 樣式也可以包進來 ._. */
.original-white {
color: #fff;
}
</style>
經過 Webpack + Vue-loader 編譯後的 .vue，顯示內容與前者相同。
若是不想自己整合，可以使用官方工具 Vue-cli，透過幾行指令生成基本的專案環境。
# 全域安装 vue-cli，當成系統命令用
$ npm install --global vue-cli
# 建立webpack樣板專案
$ vue init webpack my-project
# 若你剛開始學或不需要測試，簡化版本比較好懂
$ vue init webpack-simple my-project
# 安裝所需模組
$ cd my-project
$ npm install
# 開啟 http server
$ npm run dev
如果編譯過程順利，會有訊息提醒你
「連進 http://localhost:8080 ，瞧瞧大作吧」
不好意思，可能有點久了，因為我最近才看到這篇，
不過大大的範例裡面：
var app = new Vue({
el: '#app",
data: {
message: 'vue rock!'
}
})
那個el: '#app",兩邊的引號不一致耶
謝謝你，已修正
很久沒維護這系列，範例都停留在 v1 migrate 到 v2 那段時期
哈哈，大大是回來準備鐵人賽的嗎？
還在想題目，Nuxt.js 跟 Mocha單元測試好像沒人寫
我還滿想學單元測試這一塊的
iThome鐵人賽
看影片追技術