iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
2
Modern Web

Vue.js 30天系列 第 3

Vue.js 03 - 開發環境

寫Code首先得建好環境

官方下載點提供 Development 和 Production 版本,除了壓縮外,差在是否顯示 Vue 警告和錯誤訊息。

習慣套件管理工具的也可透過 NPM、Bower 安裝

npm install vue

bower install vue


使用上有兩種不同作法:

直接引入 Vue.js

不需要透過編譯,跟平常載入 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>

透過 Vue-loader 編譯

前一種用法 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 ,瞧瞧大作吧」


上一篇
Vue.js 02 - 結構
下一篇
Vue.js 04 - Vue Instance
系列文
Vue.js 30天30

1 則留言

1
神Q超人
iT邦新手 2 級 ‧ 2018-04-17 14:41:36

不好意思,可能有點久了,因為我最近才看到這篇,
不過大大的範例裡面:

var app = new Vue({
			el: '#app",
			data: {
				message: 'vue rock!'
			}
		})

那個el: '#app",兩邊的引號不一致耶

看更多先前的回應...收起先前的回應...
Ralph iT邦新手 5 級‧ 2018-05-29 23:40:27 檢舉

謝謝你,已修正

很久沒維護這系列,範例都停留在 v1 migrate 到 v2 那段時期

哈哈,大大是回來準備鐵人賽的嗎?

Ralph iT邦新手 5 級‧ 2018-09-09 00:19:02 檢舉

還在想題目,Nuxt.js 跟 Mocha單元測試好像沒人寫

我還滿想學單元測試這一塊的/images/emoticon/emoticon32.gif

我要留言

立即登入留言