​

一、环境准备

1. 安装 Node.js

   • 访问 Node.js 官方网站（https://nodejs.org/），下载适合你操作系统的安装包。安装完成后，在命令行中输入node -v和npm -v来检查 Node.js 和 npm（Node Package Manager）是否成功安装。

二、创建项目

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

   • npm run serve
   • 此时，在浏览器中访问http://localhost:8080/就可以看到默认的 Vue 项目首页。
   • cd my - first - vue3 - project
   • vue create my - first - vue3 - project
   • 执行这个命令后，会出现一些配置选项。你可以选择默认配置（包含基本的 Babel 和 ESLint），也可以选择手动选择特性。对于新手来说，默认配置是一个不错的开始。如果选择手动配置，你可以根据自己的需求添加 Type - Script、CSS 预处理器等特性。
   • npm install -g @vue/cli
   • 打开命令行终端，全局安装 Vue CLI：
   • 创建一个新的 Vue 3 项目：
   • 进入项目目录：
   • 启动开发服务器：

2. 使用 Vite（轻量级构建工具）

   • npm run dev
   • 之后在浏览器中访问http://localhost:3000/可以看到项目运行起来了。
   • cd my - vite - vue3 - project
   • npm install
   • 在命令行中执行npm init vite@latest my - vite - vue3 - project -- -- template vue。这个命令会创建一个基于 Vite 的 Vue 3 项目。
   • 创建项目：
   • 进入项目目录并安装依赖：
   • 启动项目：

三、项目结构介绍

1. 以 Vue CLI 创建的项目为例

   • main.js
     （或main.ts，如果使用 Type - Script）是项目的入口文件。在这里会创建 Vue 应用并挂载到 DOM 元素上。示例代码如下：

   • src
     目录是主要的开发区域。

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
  目录用于存放自定义的组件。

四、创建和使用组件

1. 创建组件

   • 在components目录下创建一个新的.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 大功告成 ！这样就可以开始开发自己的第一个 Vue 3 项目了。当然vue3还有很多特性 需要不断的去学习 实践 这样才可以让自己的开发能力更上一层楼哦！