一般而言，通常會使用編輯器並下載套件，不過，因為我們開發的程式都不是很大，可以使用CodeSandbox。CodeSandbox顧名思義就是個沙盒，讓我們可以實驗，不建議將正式的程式放在CodeSandbox上，但是，我們前幾週先使用CodeSandbox，簡化大家的使用環境，等到大家要開始一起工作，我們再介紹如何使用編輯器並下載相關套件。

環境設定

<aside> 📢 codesandbox及vs code產生的範例有所不同，如:App.vue、css的寫法有所不同，參考時請注意

</aside>

我們可以看到App.vue，裡面的語法就是Vue的語法，Vue的語法其實就是javascript的語法，然而，vue提供了一些額外的功能，所以，跟一般看到的javascript語法不太一樣。另外，目前的內建的範例是以typescript來寫，typescript簡單的說就是加了資料型態的javascript，細節未來再詳談。在Vue裡，可以看到:

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>

**<template>**
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="<https://vuejs.org/>" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
**</template>**

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Vue基本結構

內容滿複雜的，我們先精簡一下，先把App.vue內容改成:

<script setup lang="ts">

</script>

<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>

Untitled

看起來跟HTML的樣子好像一樣，在Vue 3以後，提供新的寫法，可以將html的內容放在<template></template>裡面，在Vue 3以前的語法則是直接寫html，新的語法讓程式碼變得比較簡潔，等一等我們會讓大家看一下另一種寫法。在template裡可以使用標準的HTML。一不同的是<HelloWorld>的部分，稍後再詳細解釋。然而，跟標準的HTML不一樣的是，檔案的名稱是App.vue，而不是App.html。

我們來看一下index.html，這樣的寫法就是原本的寫法，在這裡，利用<script></script>，引用javascript檔案:main.ts:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    **<script type="module" src="/src/main.ts"></script>**
  </body>
</html>

來看一下main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

<aside> 📢 VS Code產生的內容用的是assets/main.css

</aside>

**import './assets/main.css'**

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

所以，Vue是利用寫好的createApp()去讀取App.vue的內容，將App.vue的內容轉換成javascript，再去產生html的內容，產生的內容利用mount()，放在index.html裡面id為app的位置，這也就是為何我們會看到App.vue內容的原因。

createApp(App).mount('#app')

在main.ts的第二行匯入css，可以看到語法就跟html引用css的語法完全不同，因為這是透過javascript引用css。

import './style.css'