vue3.0入門（五）：vite構建vue項目

使用vite構建項目步驟

1. 安裝node，cmd輸入：node -v驗證是否安裝成功；一般node安裝后會自動安裝npm，cmd輸入：npm -v驗證是否安裝成功
2. 選擇一個文件夾作為項目文件夾，搜索框輸入cmd，輸入：npm init @vitejs/app
3. 輸入項目名稱或者按enter使用默認名稱：vite-project
4. 選擇框架vue
5. 進入項目：cd vite-project
6. 執行：npm install
7. 運行項目：npm run dev
8. 如果出現報錯，管理vue模板校驗：VSCode -> 設置 -> 取消勾選'Vetur>Validation:template'

單文件組件

<template>  
</template>

<script>  
export default {   
}
</script>

<style>  
</style>

vite項目的單文件組件使用邏輯

1. 自定義的單文件組件如helloworld.vue通過export導出
2. 在app.vue中通過import導入自定義的單文件組件
3. 在main.js中通過mount方法掛載

viet項目在app.vue中同樣可使用單文件組件的形式，這時如果同時要引入自定義的單文件組件，需使用如下方式：

<!-- 例如引入自定義單文件組件HelloWorld.vue-->
<script>
import HelloWorld from './components/HelloWorld.vue'     
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      // ...根組件中數據
    }
  }
}
</script>

使用規范

• 根組件app.vue的template標簽中使用引入的子組件HelloWorld.vue時如果報錯，子組件中模板應使用單根組件形式

<template>
  <div>
    <!-- HelloWorld.vue文件中只有一個根節點的模板才不會報錯-->
  </div>
</template>

• 在父組件app.vue中使用引入的子組件時，可使用小寫，必須用橫杠連接；使用子組件必須有閉合標簽

<template>
  <HelloWorld/>
  <hello-world/>
</template>