NVM配置与Vue3+Vite项目快速搭建指南

在当今快速发展的前端技术领域中，掌握高效的环境配置和项目搭建技能是至关重要的。Node Version Manager（NVM）作为一款强大的Node.js版本管理工具，能够帮助开发者轻松切换和管理不同版本的Node.js，以满足不同项目的需求。无论是在Mac还是Windows系统上，NVM都能提供便捷的安装和使用体验。
随着Vue.js框架的不断演进，Vue3+Vite的组合已经成为构建现代Web应用的主流选择。Vue3带来了更加高效和灵活的响应式系统，而Vite则以其极快的冷启动速度和即时的模块热更新，极大地提升了开发效率。
本文旨在为读者提供一份详尽的NVM配置指南以及Vue3+Vite项目搭建的实战教程。从NVM的安装与使用，到Vue3+Vite项目的依赖管理、配置优化，再到项目结构的梳理，我们将一步步引导读者完成项目的初始化搭建。希望本文能够帮助读者快速上手，高效推进前端项目的开发工作。

1、配置环境

1.1 NVM

NVM（Node Version Manager），即Node版本管理工具，是前端开发中一个非常实用的工具，它主要用于管理和切换不同版本的Node.js。

• 多版本管理：NVM允许开发者在同一台机器上同时安装多个版本的Node.js。这对于需要在不同项目中使用不同Node.js版本的开发者来说非常有用。
• 版本切换：通过简单的命令行操作，开发者可以轻松地在不同版本的Node.js之间进行切换，避免了手动配置环境变量的繁琐过程。
• 简化环境配置：NVM简化了环境配置的过程，提高了开发效率。开发者可以在不同项目中使用不同的Node.js版本，而无需为每个项目手动安装和配置Node.js。
• 避免冲突和兼容性问题：使用NVM可以避免不同项目之间的Node.js版本冲突和兼容性问题。开发者可以根据每个项目的需求选择合适的Node.js版本，确保项目能够正常运行。
• 管理全局和局部包：除了管理Node.js版本外，NVM还可以管理全局和局部安装的npm包。这有助于开发者在每个版本的Node.js中安装和管理自己需要的包，而不会相互干扰。

1、nvm常用命令

使用 nvm install node 安装最新版本的node

1. 安装制定版本Node

   nvm install <version> # 例如 nvm install v14.17.0

2. 列出所有可安装的Node版本

   nvm ls-remote

3. 列出已安装Node版本

   nvm list

4. 切换到已安装的指定版本

   nvm use <version> # 例如 nvm use v12.22.11

5. 卸载指定版本的Node

   nvm uninstall <version> # 卸载特定版本

6. 查看当前正在使用的Node版本

   nvm current # 显示当前激活的 Node版本

7. nvm指定某个node版本为默认版本

   nvm alias default 20.9.0

1.2 Mac配置环境

1、安装nvm

首先得确保电脑中没有node环境，如果有的话先卸载。接着允许命令brew install nvm，出现下图则成功：

但是可以看到我们终端允许命令 nvm -v看到找不到nvm，接着使用命令brew list nvm看到路径如下：

接着我们使用vscode的命令code ~/.zshrc打开配置文件进行配置，路径记得改成你自己的路径：

接着保存后在终点运行命令source ~/.zshrc，来重新加载配置文件。接着输入命令nvm -v，出现如下图说明安装成功：

1.3 Window配置环境

1、安装nvm

打开网址https://github.com/coreybutler/nvm-windows/releases，如下图所示：

直接点击下载安装。安装成功后直接终端输入命令nvm -v如果出现版本号的话说明成功了。

---

2、 项目搭建

2.1 项目依赖

输入命令npm init vite@latest my-vue-app -- --template vue

接着输入命令npm install等待安装好依赖项，然后运行命令npm run dev出现如下图则我们项目搭建成功：

---

2.2 安装依赖

直接输入命令一次性安装依赖npm i less vue-router element-plus @element-plus/icons-vue
出现如图所示即为安装成功：

---

2.3 配置

1、别名配置

在vite.config.js中写入如下代码：

  // 路径别名
  resolve: {
    alias: [
      {
        find: '@',
        replacement: "/src"
      }
    ]
  }

2、创建样式及图片文件夹

在src/assets下创建文件夹如下图所示：

index.less中引入reset.less：@import './reset.less';
reset.less写入重置代码：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

在main.js中引入：import '@/assets/less/index.less'，可以看到已经生效:

3、路由

在src中新建文件夹views，新建Main.vue，写入如下代码：

<template>
    <div>
        main
    </div>
</template>

<script setup>

</script>

<style scoped>
</style>

在src中新建文件夹router，新建index.js，写入如下代码：

import { createRouter, createWebHashHistory } from "vue-router";

// 路由规则
const routes = [
    {
        path: '/',
        name: 'main',
        component: () => import('@/views/Main.vue')
    }
]

const router = createRouter({
    // 设置模式
    history: createWebHashHistory(),
    routes
})

export default router;

在main.js中引入router，

import router from './router'

const app = createApp(App)
app.use(router).mount('#app')

接着在App.vue中写入代码如下：

<script setup>

</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

---

2.4 项目搭建效果

显示如图的话，所以我们的项目搭建初始化是成功的。

---

2.5 项目结构

最后给出项目的结构目录如下：

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── images
│   │   ├── less
│   │   │   ├── index.less
│   │   │   └── reset.less
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   └── views
│       └── Main.vue
└── vite.config.js

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。