筆記 - Vue.js 檔案結構

Posted on In

本篇筆記是關於 Vue.js 本地開發環境的檔案結構。

npm init vue@latest

之後依照指示進行，就會建立好專案。

public 資料夾

通常在專案裡，叫做 public 的資料夾是放一些可以直接被外部讀取到的檔案。default 會有 favicon.ico檔案。


scr 資料夾

一些資料夾，以及 App.vue 與 main.js 檔案。

main.js

src/main.js 是 Vue.js 專案裡 JavaScript 的進入點，在我們啟動 Vue.js 時，會從 main.js 這支檔案開始解析

1
2
3
4
5
6
7
8
import { createApp } from 'vue' 
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

The root component

1
2
3
import { createApp } from 'vue' 
// import the root component App from a single-file component.
import App from './App.vue'
  • vue - Vue.js 本身
  • App.vue - 這個專案的根元件，也就是這個專案本身

Mounting the App

An application instance won’t render anything until its .mount() method is called. It expects a “container” argument, which can either be an actual DOM element or a selector string:

1
<div id="app"></div>
1
app.mount('#app')

App.vue

SFC (Single-File Components) 結構。

  • <template></template> 裡放 HTML 元素內容
  • <script></script> 內放 JavaScript 語法，大多是和 Vue 有關的資料處理或方法
  • <style></style> 裡則是和 css 樣式相關的設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

Vue 會將 <RouterLink to="path"> 渲染成 <a herf="path">，因此就可以動態產生路徑。在這個例子裡沒有動態，不過 to="" 裡面的字串可以用演算的，例如：<router-link :to="{name:'home'}">home</router-link>，就會去尋找路由清單裡 name 屬性匹配的項目。

RouterView

這個標籤有一點點類似以前在 Express.js 專案裡 main.handlebars 裡的 {{{body}}}，在 ` 放置的位置，會把元件內容渲染出來。

上面的例子中，路徑是 /，因此會去呼叫 HomeView.vue 的內容。

1
2
3
4
5
6
7
8
// router/index.js
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    ...]

Components 資料夾

Components 資料夾放各個可以重複使用的 Vue 元件，通常一個 file 裡面會存放一個獨立的元件，這種存放 Vue component 的檔案也稱為 Vue file。

注意import 與 export寫法


Assets 資料夾

「assets」常譯做「資產」，從中文的角度不太容易理解，但這個字在專案架構裡通常是指靜態檔案，最常見的就是圖檔。


router 資料夾

有安裝 Vue Router 在 src 資料夾會有 router/index.js，這是路由的設定檔。

在 createRouter() 內有一個 routes:[] 的陣列，這裡面設定了路由清單，每一條路由都是一個物件，有著三個屬性：

  • path：網址字串
  • component：Vue 元件的名稱
  • name ：可以省略，如果路由有命名，在某些情況下也可以透過 name` 屬性來指派路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
routes: [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/AboutView.vue')
  }
]

當使用者進到根目錄 / 時，使用者會看到 Home.vue 的內容；當使用者進到的路徑是 /about 時，使用者會看到 About.vue 的內容。

Home.vue 的載入路徑寫在檔案的最上方，這代表 Home.vue 在每次載入路由時，都會一併載入。

而 About.vue 是把 import 寫在 component 屬性內，在有人到達 /about 這組路由時，才會執行 component 裡的 function，動態載入需要的檔案。這樣的寫法可以減少不必要的流量：如果使用者沒有到達這裡、那就不用預先載入這頁的組件內容。

views 資料夾

放在 views 資料夾裡的 Vue component 可以直接在 index.js 裡被使用，而通常每一組路由的 path 都會對應到 views 資料夾中的一個 Vue 「頁面」。


載入 Bootstrap 方法

npm install bootstrap @popperjs/core

在 src/main.js 中 import（記得把 vue default import 的 css 那行 comment 掉或是刪掉）

1
2
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap/dist/js/bootstrap.js"

Summary: component => view => App.vue

SomeComp.vue component 檔案中 <template></template> 中貼上 Bootstrap component

SomeView.vue view 檔案中 import component，然後在 template 中放進去

1
2
3
4
5
6
7
8
9
<script setup>
import FormComp from '../components/FormComp.vue'
</script>

<template>
  <main>
    <FormComp />
  </main>
</template>

最後就是 App.vue 入口檔案中 import view 也是放進去這樣

所以在專案建置的時候，前端會先把元件拆分成樹狀圖，並且分辨出哪些是共用元件 (component)，再把 component 做好組成 view，目前感受是這樣。