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

相关推荐
ᥬ 小月亮1 分钟前
webpack基础
前端·webpack
YongGit20 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js