[ Vue.js ] 專案結構

Vue專案結構巡覽。
Vue檔案中的組成架構 : template、script、style。

專案結構

建立完Vue專案後，開啟專案。

專案

可以看到src資料夾(Vue 專案的核心)底下，分別為assets與components資料夾、App.vue與main.js檔案。

assets資料夾 : 放置一些靜態圖片與CSS。

src/assets/logo.png

components資料夾 : 放置共用元件。

src/components/HelloWorld.vue

App.vue : Vue應用程式的根節點。

src/App.vue

main.js : 專案入口處，初始化 Vue 應用程式。

src/main.js

App.vue

開啟App.vue檔案。

src/App.vue

.vue檔案主要是由三個標籤所組成的，以App.vue的內容依序來看，分別為
template、script、style。

script

<script>區塊是註冊元件與處理Javascript的區域。

在script中，會創建一個vue的實體，並用export default { ...};包著來輸出給template或是其他外部做引入使用。

vue元件操作:

[ components ]

定義元件(components)。

在專案的src/App.vue，可以看到<script/>中的第一行import HelloWorld from "./components/HelloWorld.vue";import(引入)HelloWorld.vue檔案並命名為HelloWorld。
接著在export default { …};中，將HelloWorld以元件(components)輸出至頁面，讓<template/>以<HelloWorld>標籤來做使用，顯示HelloWorld.vue中的內容。

src/App.vue的<script>

[ props ]

元件(components)與元件(components)之前傳遞資料的方式。

在專案的src/HelloWorld.vue，可以看到<script/>的export default { }內定義了props屬性有一個命名為msg、型態為String的組件。

src/HelloWorld.vue的<script>

接著在src/HelloWorld.vue，往上看到<template/>內<h1>{{ msg }}</h1>
以花括號包住msg來顯示接收到的msg值。

src/HelloWorld.vue的<template>

其他還有很多元件，如:data ()、computed、methods、watch、filters、directives...等，用來定資料或是計算、處理資料。

template

<template>區塊是元件模板，主要是處理HTML與Vue的語法。

<img>標籤定義了圖片來源為assets裡的logo.png圖檔，並顯示在畫面上。<Helloworld/>標籤顯示Helloworld.vue的內容。

template翻譯成中文為模板，<template>標籤內是用來撰寫HTML的地方，比較特別的是這邊除了可以寫HTML外，還可以操作Vue的語法。

template中的Vue語法操作，如src/HelloWorld.vue中以花括號{{ }}顯示值的方式。

src/HelloWorld.vue的<template>

其他還有很多Vue語法，如:v-for、v-if、v-else-if、v-else、v-show、…等，用來組成HTML畫面。

style

<style>區塊設定頁面的CSS樣式。

跟一般寫CSS的寫法一樣，其中比較特別的是scoped屬性。
在style加上scoped屬性後，裡面所寫的CSS樣式會變成僅限於這個vue元件使用。

src/App.vue的<template>