环境搭建

2.1 安装 Node.js 和 npm

1. 下载 Node.js：

   • 前往 Node.js 官方网站，选择适合你操作系统的版本进行下载。建议选择 LTS（长期支持）版本。

2. 安装 Node.js：

   • 根据下载的安装包进行安装，安装过程中保持默认设置即可。

3. 验证安装：

   • 安装完成后，打开命令行（Windows：cmd 或 PowerShell，macOS/Linux：终端）。
   • 输入以下命令检查 Node.js 和 npm 是否安装成功：

     node -v
     npm -v
     

   • 如果命令返回版本号，说明安装成功。

2.2 创建 Vue 3 项目

2.2.1 使用 Vue CLI

1. 全局安装 Vue CLI：

   • 在命令行中输入以下命令：

     npm install -g @vue/cli
     

   • 这将全局安装 Vue CLI。

2. 创建新项目：

   • 使用以下命令创建一个新项目：

     vue create my-vue-app
     

   • 你将会被提示选择配置，可以选择默认配置或手动选择（如选择 Babel、Router、Vuex 等）。

3. 进入项目目录：

   cd my-vue-app
   

4. 启动开发服务器：

   • 使用以下命令启动项目：

     npm run serve
     

   • 打开浏览器并访问 http://localhost:8080，你应该能看到 Vue 应用的欢迎页面。

2.2.2 使用 Vite

1. 创建新项目：

   • 使用以下命令创建一个新项目（Vite 会自动安装）：

     npm create vite@latest my-vue-app --template vue
     

   • 这将创建一个新的 Vue 3 项目，使用 Vite 作为构建工具。

2. 进入项目目录：

   cd my-vue-app
   

3. 安装依赖：

   • 在项目目录中，运行以下命令安装依赖：

     npm install
     

4. 启动开发服务器：

   • 使用以下命令启动项目：

     npm run dev
     

   • 打开浏览器并访问 http://localhost:5173（Vite 默认端口），你应该能看到 Vue 应用的欢迎页面。

小结

通过以上步骤，你已经成功搭建了 Vue 3 的开发环境，并创建了一个新的项目。接下来，你可以开始学习 Vue 3 的核心概念和组件开发。