使用不同的方式建立一個新的專案，本篇會介紹使用不同的方式，
開啟一份Vue的編寫環境

使用建立方式

本地端

官方的Vue這邊推薦的安裝方式是基於Vite的環境安裝

npm init vue@latest

需要注意的這邊建立的專案
是以compositionAPI(<script setup>) 的方式做編寫

線上

在StackBlitz上在線試用 Vue 和 SFC

不使用建立方式

1. step1 : <script src="https://unpkg.com/vue@3"></script>引入至HTML中
   主要createApp內要把掛載內容的地方寫對id="app"，才會正常顯示。
   這邊的id="app"，掛載的不是在app.vue中的位置，而是在index.html中的id="app"

如果要使用ref：const { createApp, ref } = Vue

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

2. 雖然正常使用但，為了使ES modules 保持一制性，更改為

通過import與export的方式引入模組使用

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

3. 為了便於管理要將初始化的與模組拆分
   為了要使以下這兩段工作起來，需要啟動本地的http服務器

• 需要安裝Node.js，在html文件中npx serve運行

info
在這邊內文已經被定義在<Script>，可以在VSCode 安裝es6-string-html 在字符串前面添加/html/註釋，突出顯示語法的區別。

   <!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

總結

1. 使用本地端構建
   1. 可以嘗試線上實作
   2. 或是指令安裝使用
2. 不使用指令構建
   1. 為了啟動本地端的http服務器，確認安裝Node.js套件
   2. 便於管理模組，將初始化模組與開發模組分開撰寫