?

一、環(huá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)建項目

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

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

2. 使用 Vite（輕量級構建工具）

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

三、項目結構介紹

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

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

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

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

• App.vue
  是根組件，它包含了頁面的基本布局和其他子組件的引用。其基本結構包括<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)建一個新的.vue文件，比如MyComponent.vue。一個簡單的組件可能如下：

<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>標簽中導入組件：
   • 然后在components選項中注冊組件：
   • 最后在<template>標簽中使用組件：

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