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

相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js