Vue3專案的建立與執行
本文記錄下自己近期學習的Vue3專案的建立，以及如何去執行一個Vue應用，同時包括對Vue專案結構進行一個簡單的介紹。
一、node與npm的安裝
通常平常進行開發的同學應該都已經具備node環境了，如果還沒有的同學可以直接去node官網進行下載，npm會隨node一同安裝下來。
安裝完成後可以通過以下的命令來檢視node和npm是否安裝成功
node -v
會輸出node的版本
npm -v
會輸出npm的版本
二、Vue應用的建立
cmd進入需要建立專案的資料夾目錄下，執行下面的命令
npm init vite-app project_name
執行完成後，則在當前目錄下會出現一個project_name(這是你建立的專案的名稱，你可以自己進行修改)的資料夾,之後進入該資料夾下，可以看到一個最基本的Vue專案的結構。
一開始建立的目錄下應該還沒有node_modules和package-lock.json這兩個檔案，因此，我們需要通過下面的命令來下載我們專案所需的模組或者說是依賴
npm install
三、Vue應用的執行
在完成了模組的安裝後，我們就可以去試著執行下這個Vue應用，通過下面的命令就可以直接執行
npm run dev
個人理解可以講npm run 理解為執行某個指令碼，而這裡的dev指令碼的定義則在package.json中有定義。
四、關於專案結構的介紹
要了解整個專案結構，可以先從index.html這個檔案開始看，可以發現整個就是個普通html檔案的結構，其中給了一個div標籤，以及包含屬性id為app，這裡顯然就是Vue要渲染的部分
<!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>
之後下面的script標籤，引入了main.js這個檔案，接下來就可以來檢視下這個檔案，main.js的檔案內容如下:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
可以看到第一行從Vue引入createApp，以及下面的掛載至id為app的標籤上，和以前我們直接用一個html些Vue應用是類似的：
<script>
Vue.createApp({}).mount("#app")
<script>
其中App替代了我們之前的直接的一個json物件，因此，那麼App就應該是我們之前所說的根元件，所以可以來看下App.Vue這個檔案
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
可以看到export default的就是我們之前的那個json物件，HelloWorld就是定義的子元件，之前的寫法是直接全都寫在一起：
//子元件
const HelloWorld = {
}
app = Vue.createApp({
components:{
HelloWorld
}
})
app.mount("#app")
五、結語
總體上來說，Vue專案的結構更加符合工程化，各結構都是分開的，邏輯清晰，更加有利於專案的開發。