?

一、環(huán)境準(zhǔn)備

1. 安裝 Node.js

   • 訪問 Node.js 官方網(wǎng)站（https://nodejs.org/），下載適合你操作系統(tǒng)的安裝包。安裝完成后，在命令行中輸入node -v和npm -v來檢查 Node.js 和 npm（Node Package Manager）是否成功安裝。

二、創(chuàng)建項(xiàng)目

1. 使用 Vue CLI（命令行工具）

   • npm run serve
   • 此時(shí)，在瀏覽器中訪問http://localhost:8080/就可以看到默認(rèn)的 Vue 項(xiàng)目首頁。
   • cd my - first - vue3 - project
   • vue create my - first - vue3 - project
   • 執(zhí)行這個(gè)命令后，會(huì)出現(xiàn)一些配置選項(xiàng)。你可以選擇默認(rèn)配置（包含基本的 Babel 和 ESLint），也可以選擇手動(dòng)選擇特性。對(duì)于新手來說，默認(rèn)配置是一個(gè)不錯(cuò)的開始。如果選擇手動(dòng)配置，你可以根據(jù)自己的需求添加 Type - Script、CSS 預(yù)處理器等特性。
   • npm install -g @vue/cli
   • 打開命令行終端，全局安裝 Vue CLI：
   • 創(chuàng)建一個(gè)新的 Vue 3 項(xiàng)目：
   • 進(jìn)入項(xiàng)目目錄：
   • 啟動(dòng)開發(fā)服務(wù)器：

2. 使用 Vite（輕量級(jí)構(gòu)建工具）

   • npm run dev
   • 之后在瀏覽器中訪問http://localhost:3000/可以看到項(xiàng)目運(yùn)行起來了。
   • cd my - vite - vue3 - project
   • npm install
   • 在命令行中執(zhí)行npm init vite@latest my - vite - vue3 - project -- -- template vue。這個(gè)命令會(huì)創(chuàng)建一個(gè)基于 Vite 的 Vue 3 項(xiàng)目。
   • 創(chuàng)建項(xiàng)目：
   • 進(jìn)入項(xiàng)目目錄并安裝依賴：
   • 啟動(dòng)項(xiàng)目：

三、項(xiàng)目結(jié)構(gòu)介紹

1. 以 Vue CLI 創(chuàng)建的項(xiàng)目為例

   • main.js
     （或main.ts，如果使用 Type - Script）是項(xiàng)目的入口文件。在這里會(huì)創(chuàng)建 Vue 應(yīng)用并掛載到 DOM 元素上。示例代碼如下：

   • src
     目錄是主要的開發(fā)區(qū)域。

import{ createApp}from'vue';importAppfrom'./App.vue';const app=createApp(App); app.mount('#app');

• App.vue
  是根組件，它包含了頁面的基本布局和其他子組件的引用。其基本結(jié)構(gòu)包括<template>（模板部分）、<script>（邏輯部分）和<style>（樣式部分）。例如：

<template><divid="app"><imgalt="Vue logo"src="./assets/logo.png"><HelloWorldmsg="Welcome to Your Vue.js App"/></div></template><script>importHelloWorldfrom'./components/HelloWorld.vue';exportdefault{components:{HelloWorld}};</script><style>#app{ text-align: center;}</style>

• components
  目錄用于存放自定義的組件。

四、創(chuàng)建和使用組件

1. 創(chuàng)建組件

   • 在components目錄下創(chuàng)建一個(gè)新的.vue文件，比如MyComponent.vue。一個(gè)簡單的組件可能如下：

<template><div><h1>{{ message }}</h1></div></template><script>exportdefault{data(){return{message:'This is my component'};}};</script><stylescoped>h1{color:blue;}</style>

1. 使用組件

   • <MyComponent />

   • export default { components: { MyComponent } };

   • import MyComponent from './components/MyComponent.vue';

   • 在需要使用組件的父組件（如App.vue）中，先在<script>標(biāo)簽中導(dǎo)入組件：
   • 然后在components選項(xiàng)中注冊(cè)組件：
   • 最后在<template>標(biāo)簽中使用組件：

OK 大功告成 ！這樣就可以開始開發(fā)自己的第一個(gè) Vue 3 項(xiàng)目了。當(dāng)然vue3還有很多特性 需要不斷的去學(xué)習(xí) 實(shí)踐 這樣才可以讓自己的開發(fā)能力更上一層樓哦！