Vue3开发环境搭建和工程结构(一)

maplea2012

已于 2024-02-05 21:46:23 修改

阅读量977

点赞数 9

分类专栏： Vue 文章标签： vue.js 前端框架

于 2024-02-05 21:23:06 首次发布

本文链接：https://blog.csdn.net/weixin_37901366/article/details/136047933

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用NVM管理Node.js的不同版本，包括安装步骤和长期支持版选择。此外，还详细讲解了在Windows上通过Vite创建Vue3项目的流程，涉及目录结构、依赖安装和配置文件等内容。

摘要由CSDN通过智能技术生成

一、NVM和Node.js安装

NVM 是 Node Version Manager（Node 版本管理工具）的缩写，是一个命令行工具，用于管理和切换到不同版本的 Node.js。

1、前往 nvm-windows 仓库，然后单击立即下载

2、下载最新版本

3 、按照安装向导进行安装

4、打开 PowerShell 或命令提示符并运行 `nvm -v` 以确认安装

5、以管理员身份打开并运行PowerShell

6、安装Node.js

安装 Node 的长期支持（LTS）版本更好，因为它的 bug 更少

要安装特定版本的 Node，你需要先运行 nvm list available，以便查看可用的 Node 版本。

要安装该特定版本，请运行 nvm install node-version-number，例如，nvm install 14.20.0

7、查看Node.js是否安装成功

二、创建Vue3项目

1、通过Vite方式创建项目

D:\01-study\vue3\vue01>npm create vue@latest
Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... hello_vue3
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

正在构建项目 D:\01-study\vue3\vue01\hello_vue3...

项目构建完成，可执行以下命令：

  cd hello_vue3
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice