2024-01-04

【React-Vue】Vue.js起手式

原文發表於 Medium。

Vue.js是許多台灣前端設計人員的首選前端框架，擁有學習曲線平緩，語法精簡易用的優點。我們來建構一個新的Vue.js專案，以React開發者的眼光，淺嚐一下Vue的威力吧！

//cli輸入
npm create vue@latest

//設定後續跳出的各選項  
✔ Project name: … //您要設定的專案名，可enter直接使用預設值。  
✔ Add TypeScript? … No / Yes. //N  
✔ Add JSX Support? … No / Yes  //N  
✔ Add Vue Router for Single Page Application development? … No / Yes  //N  
✔ Add Pinia for state management? … No / Yes  //N  
✔ Add Vitest for Unit Testing? … No / Yes  //N  
✔ Add an End-to-End Testing Solution? › No  //N  
✔ Add ESLint for code quality? … No / Yes  //N  
✔ Add Prettier for code formatting? … No / Yes  //N

接著進入該資料夾安裝npm上的所有相依套件：

npm install

最後我們的vue專案就初始設定完成啦！

觀察一下新專案中的資料夾內容：

vue.js專案資料夾內容

首先在主資料夾中一定會有一個index.html，這個檔案的長相跟React專案中的幾乎一模一樣，在body之下有一個 id是app的div元素：

<!DOCTYPE html>

<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <link rel="icon" href="/favicon.ico">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vite App</title>  
  </head>  
  <body>  
    <div id="app"></div>  
    <script type="module" src="/src/main.js"></script>  
  </body>  
</html>

vue就是透過這個div掛載到html上，才被瀏覽器讀取，並運算出頁面內容。

而我們在建構專案時最長時間接觸到的資料夾是/src，在剛建立的專案中，它的內部狀況如下（vue.js v.3）：

vue.js v.3 /src資料夾

如同react，資料夾中有一個main檔，以及一個app檔，一個assets資料夾裝素材（vue專案的css檔集中放在這裡），一個components資料夾是給組成頁面的小型元件放置的地方。由於vue有自己的副檔名，因此app檔不是app.jsx，main檔也只是普通的js檔而已。

Vue檔

在一般情況下，我們是不太容易動到main.js，因此可以直接放著不管。但app.vue檔可以說是藏著許多的玄機，透過分析它，就可以大致上了解vue元件的架構：

<template>  
  <header>  
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />  
  
    <div class="wrapper">  
      <HelloWorld msg="You did it!" />  
    </div>  
  </header>  
  
  <main>  
    <TheWelcome />  
  </main>  
</template>  
  
<style scoped>  
header {  
  line-height: 1.5;  
}  
  
.logo {  
  display: block;  
  margin: 0 auto 2rem;  
}  
  
@media (min-width: 1024px) {  
  header {  
    display: flex;  
    place-items: center;  
    padding-right: calc(var(--section-gap) / 2);  
  }  
  
  .logo {  
    margin: 0 2rem 0 0;  
  }  
  
  header .wrapper {  
    display: flex;  
    place-items: flex-start;  
    flex-wrap: wrap;  
  }  
}  
</style>

由上可以發現到app.vue分成三大部分：
1. script
2. template
3. style

script就是我們寫JS運算或import子元件的地方，而瀏覽器則會渲染出template的內容，然後css就直接寫在style區塊內（可以說是vue就自帶css-in-js的功能）。以上就是大部分vue檔的結構樣貌。

上面談到的script跟style標籤是不是很有html的既視感呢？但眼尖的夥伴一定看到了script標籤還有一個setup attribute，style標籤也有一個scoped attribute，而這兩個其實代表的是vue的獨有功能。

script若標示了setup，則代表在瀏覽器每次載入元件時，都會執行script中的程式，若我們將setup去掉，script就只會在讀取頁面時執行一次而已。在大多數的場合，我們都希望頁面保持與使用者的互動能力，因此幾乎所有的vue檔都會使用setup的設定。

另外在style標籤中scoped也幾乎是常態性的設定，它可以將單一vue檔中的css設定限制在該檔中，如此一來就不會讓某個元件中的style設定影響到其他的元件，而這在React中還需要使用module-css來幫忙，就麻煩了許多。

以上就是從React開發者角度瞥見Vue.js的第一眼，下一篇我即將來繼續深入vue components，看看vue的子元件寫法，以及在元件間傳遞資料的重要媒介-props。