Vue 环境配置与项目创建指南

1. 前置要求

在开始配置 Vue 开发环境之前，需要确保以下工具已安装：

Node.js：Vue 的构建工具依赖 Node.js。

npm 或 yarn：Node.js 自带 npm 包管理工具，也可以选择安装 yarn。

安装 Node.js

前往 Node.js 官网下载并安装 LTS 版本。

安装完成后，通过以下命令验证安装：

dart 复制代码

node -v
npm -v

2. 配置 npm 的国内镜像（加速下载）

国内访问 npm 的速度较慢，推荐将 npm 的下载源设置为淘宝镜像。

设置 npm 镜像

执行以下命令：

dart 复制代码

npm config set registry https://registry.npmmirror.com

验证配置是否成功：

dart 复制代码

npm config get registry

输出应为：

dart 复制代码

https://registry.npmmirror.com/

使用 nrm 工具快速切换镜像（可选）

nrm 是一个 npm 源管理工具，可以快速切换源。

安装 nrm

dart 复制代码

npm install -g nrm

查看可用源

dart 复制代码

nrm ls

示例输出：

dart 复制代码

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  npmmirror ---- https://registry.npmmirror.com/ (淘宝镜像)

切换到淘宝镜像

dart 复制代码

nrm use npmmirror

恢复默认源

dart 复制代码

nrm use npm

3. 全局安装 Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，用于快速创建项目。

安装 Vue CLI

dart 复制代码

npm install -g @vue/cli

验证安装

dart 复制代码

vue --version

若安装成功，将输出版本号。

4. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

创建项目

dart 复制代码

vue create my-vue-app

执行命令后：

如果选择默认配置，直接按回车。

如果需要自定义配置（如 TypeScript 支持、路由、状态管理等），可以手动选择。

进入项目目录

dart 复制代码

cd my-vue-app

启动开发服务器

dart 复制代码

npm run serve

启动成功后，在浏览器中打开 http://localhost:8080，即可看到默认的 Vue 应用页面。

5. 常用插件与工具

根据项目需求，可以安装以下工具：

Vue Router（路由管理）

dart 复制代码

npm install vue-router@next

Vuex 或 Pinia（状态管理）

安装 Vuex：

dart 复制代码

npm install vuex@next

安装 Pinia：

dart 复制代码

npm install pinia

Axios（HTTP 请求库）

dart 复制代码

npm install axios

ESLint（代码规范工具）

在创建项目时可以选择集成 ESLint，或者后续手动安装：

dart 复制代码

npm install eslint --save-dev

6. 配置 Vue 项目中的下载源（可选）

若使用 Vue CLI 创建项目时速度较慢，可设置 Vue CLI 使用的 npm 镜像。

设置 Vue CLI 的下载源

dart 复制代码

vue config set registry https://registry.npmmirror.com

验证：

dart 复制代码

vue config get registry

7. 总结

至此，你已经完成了 Vue 环境的安装和配置，并成功创建了一个新的 Vue 项目。接下来，你可以根据项目需求进行功能开发。如果遇到任何问题，随时可以参考官方文档或寻求社区支持。

官方文档链接：https://cn.vuejs.org