1 Vite項目目錄

 用Vscode打開創建的項目，看到下麵的目錄結構：

 通過運行  npm install 初始化項目後生成兩個初始化文件：node_modules和 package-lock.json

2 SFC 語法規範

*.vue 件都由三種類型的頂層語法塊所組成：<template>、<script>、<style>

<template>（html）

• 每個 *.vue 文件最多可同時包含一個頂層 <template> 塊。
• 其中的內容會被提取出來並傳遞給 @vue/compiler-dom，預編譯為 JavaScript 的渲染函數，並附屬到導出的組件上作為其 render 選項。

<script>（js）

• 每一個 *.vue 文件最多可同時包含一個 <script> 塊 (不包括<script setup>)。
• 該腳本將作為 ES Module 來執行。
• 其預設導出的內容應該是 Vue 組件選項對象，它要麼是一個普通的對象，要麼是 defineComponent 的返回值。

<script setup>(js)

• 每個 *.vue 文件最多可同時包含一個 <script setup> 塊 (不包括常規的 <script>)
• 該腳本會被預處理並作為組件的 setup() 函數使用，也就是說它會在每個組件實例中執行。<script setup> 的頂層綁定會自動暴露給模板。更多詳情請查看 <script setup> 文檔。

<style>(css)

• 一個 *.vue 文件可以包含多個 <style> 標簽。
• <style> 標簽可以通過 scoped 或 module attribute (更多詳情請查看 SFC 樣式特性) 將樣式封裝在當前組件內。多個不同封裝模式的 <style> 標簽可以在同一個組件中混

3 項目啟動命令詳解

在終端我們可以通過npm run dev 來啟動項目。在我們執行這個命令的時候會去找 package json 的scripts 然後執行對應的dev命令。

那為什麼我們不直接執行vite 命令不是更方便嗎？由於我們的電腦上面並沒有配置過相關命令 所以無法直接執行。

其實在我們執行npm install 的時候（包含vite） 會在node_modules/.bin/ 創建好可執行文件。

.bin 目錄，這個目錄不是任何一個 npm 包。目錄下的文件，表示這是一個個軟鏈接，打開文件可以看到文件頂部寫著 #!/bin/sh ，表示這是一個腳本 。

 在我們執行npm run xxx  npm 會通過軟連接 查找這個軟連接存在於源碼目錄node_modules/vite。

所以npm run xxx 的時候，就會到 node_modules/bin中找對應的映射文件，然後再找到相應的js文件來執行。

1.查找規則是先從當前項目的node_modlue /bin去找；

2.找不到去全局的node_module/bin 去找；

3.再找不到 去環境變數去找。

 node_modules/bin中 有三個vite文件。為什麼會有三個文件呢？

# unix Linux macOS 系預設的可執行文件，必須輸入完整文件名
vite
 
# windows cmd 中預設的可執行文件，當我們不添加尾碼名時，自動根據 pathext 查找文件
vite
 
# Windows PowerShell 中可執行文件，可以跨平臺
vite