/

使用Vue.js建立您的第一個應用程式

使用Vue.js建立您的第一個應用程式

如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。我們即將建立的應用程式已經完成，並且這是Vue CLI的預設應用程式。

如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。

第一個範例

首先，我們將使用最基本的Vue範例。

您需要建立一個包含以下內容的HTML檔案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 <body>
 <div id="example">
 <p>{{ hello }}</p>
 </div>
 <script src="https://unpkg.com/vue"></script>
 <script>
 new Vue({
 el: '#example',
 data: { hello: 'Hello World!' }
 })
 </script>
 </body>
</html>

然後在瀏覽器中打開它。這就是您的第一個Vue應用程式！該頁面應該顯示一個“Hello World！”的訊息。

我將腳本標籤放在body的末尾，以便在DOM加載後按順序執行。

這段程式碼的作用是，我們實例化了一個新的Vue應用程式，將其連結到#example元素作為其模板（通常使用CSS選擇器來定義，但也可以傳遞HTMLElement）。

然後，它將該模板與data對象關聯。data是一個特殊的對象，用於存放我們希望Vue渲染的數據。

在模板中，特殊的{{ }}標記表示它是模板中的某一部分是動態生成的，其內容應從Vue應用程式數據中查找。

在Codepen上查看

您可以在Codepen上查看此範例： https://codepen.io/flaviocopes/pen/YLoLOp

碼筆與使用普通HTML檔案的方法有些不同，您需要在Pen設定中配置它以指向Vue庫的位置：

Pen settings

第二個範例：Vue CLI的預設應用程式

讓我們提升一點等級。我們即將建立的下一個應用程式是已經完成的Vue CLI預設應用程式。

什麼是Vue CLI？它是一個命令行工具，可以通過為您搭建應用程式框架並提供樣例應用程式來加快開發速度。

您可以通過兩種方式獲取此應用程式。

本地使用Vue CLI

第一種方式是在您的電腦上安裝Vue CLI，然後運行以下命令：

1
vue create <enter the app name>

使用CodeSandbox

第二種方式是前往https://codesandbox.io/s/vue（不需要安裝任何東西）。

CodeSandbox是一個很酷的代碼編輯器，允許您在雲端構建應用程式，您可以使用任何npm包，並且很容易集成到Zeit Now中以便於部署，也可以使用GitHub來管理版本控制。

我上面提供的那個鏈接打開了Vue CLI的預設應用程式。

無論您選擇本地使用Vue CLI還是使用CodeSandbox，讓我們詳細了解一下Vue應用程式。

文件結構

除了包含配置的package.json文件外，初始的專案結構還包含以下文件：

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

index.html文件是應用程式的主要文件。

在body中，它只包含一個簡單的元素：<div id="app"></div>。這是Vue應用程式將用於附加到DOM的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>CodeSandbox Vue</title>
</head>

<body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
</body>

</html>

src/main.js

這是驅動我們應用程式的主要JavaScript文件。

我們首先從App.vue中導入Vue庫和App元件。

我們將productionTip設置為false，只是為了避免Vue在控制台輸出“您處於開發模式”的提示。

接下來，我們通過將Vue實例分配給由index.html中的#app識別的DOM元素來創建Vue實例，並告訴它使用App元件。

1
2
3
4
5
6
7
8
9
10
11
12
13
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
})

src/App.vue

App.vue是一個單文件元件。它包含三個代碼塊：HTML、CSS和JavaScript。

起初，這可能看起來有點奇怪，但是單文件元件是創建自包含組件的一種很好的方式，其中在單個文件中擁有它們所需的所有內容。

我們有標記、與其交互的JavaScript以及應用於其上的樣式，它可以被作用域化或未作用域化。在這種情況下，它並非作用域化，僅將其作為常規CSS輸出到頁面上。

有趣的部分位於script標籤中。

我們從components/HelloWorld.vue文件導入一個組件，稍後我們將對其進行描述。

這個組件將在我們的組件中被引用。它是一個相依性。我們將輸出以下代碼：

1
2
3
4
<div id="app">
 <img width="25%" src="./assets/logo.png">
 <HelloWorld/>
</div>

從這個組件中，可以看到它引用了HelloWorld組件。Vue將自動將該組件插入到這個占位符中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
 <div id="app">
 <img width="25%" src="./assets/logo.png">
 <HelloWorld/>
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
 name: 'App',
 components: {
 HelloWorld
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

src/components/HelloWorld.vue

這是被App組件包含的HelloWorld組件。

此組件輸出一組鏈接以及一條訊息。

還記得我們上面在App.vue中談到的未作用域化的CSS嗎？HelloWorld組件具有作用域化的CSS。

您可以通過查看style標籤來輕鬆確定它是否有作用域：<style scoped>

這意味著生成的CSS將唯一地針對該組件，通過Vue自動地應用的一個類。您不需要擔心這一點，並且知道CSS不會流出到頁面的其他部分。

組件輸出的訊息存儲在Vue實例的data屬性中，並在模板中作為{{ msg }}輸出。

存儲在data中的任何內容都可以直接在模板中使用自己的名稱訪問。我們不需要說data.msg，只需要msg。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
 <li>
 <a
 href="https://vuejs.org"
 target="_blank"
 >
 Core Docs
 </a>
 </li>
 <li>
 <a
 href="https://forum.vuejs.org"
 target="_blank"
 >
 Forum
 </a>
 </li>
 <li>
 <a
 href="https://chat.vuejs.org"
 target="_blank"
 >
 Community Chat
 </a>
 </li>
 <li>
 <a
 href="https://twitter.com/vuejs"
 target="_blank"
 >
 Twitter
 </a>
 </li>
 <br>
 <li>
 <a
 href="http://vuejs-templates.github.io/webpack/"
 target="_blank"
 >
 Docs for This Template
 </a>
 </li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
 <li>
 <a
 href="http://router.vuejs.org/"
 target="_blank"
 >
 vue-router
 </a>
 </li>
 <li>
 <a
 href="http://vuex.vuejs.org/"
 target="_blank"
 >
 vuex
 </a>
 </li>
 <li>
 <a
 href="http://vue-loader.vuejs.org/"
 target="_blank"
 >
 vue-loader
 </a>
 </li>
 <li>
 <a
 href="https://github.com/vuejs/awesome-vue"
 target="_blank"
 >
 awesome-vue
 </a>
 </li>
 </ul>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

運行應用程式

CodeSandbox具有很酷的預覽功能。您可以運行應用程式並編輯源代碼中的任何內容，以便立即在預覽中反映出來。

The Vue App

tags: [“vue.js”, “frontend development”, “web development”]