Vue环境搭建

最新推荐文章于 2025-06-23 23:47:10 发布

一只游离の猫

最新推荐文章于 2025-06-23 23:47:10 发布

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：建站系统文章标签： node npm vue

本文链接：https://blog.youkuaiyun.com/a673216150/article/details/99641758

本文详细介绍了如何搭建Vue.js开发环境，包括安装Node.js和npm，设置cnpm镜像，安装vue-cli，初始化Vue项目，配置项目目录，以及通过npm run dev运行和预览项目。在过程中，用户需了解各个步骤的作用，如build目录用于存放发布代码，src目录为开发主要目录，而npm install用于安装项目依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）安装Node.js环境（npm包管理器）
从node.js官网下载并安装node，默认点击下一步即可安装完成。安装完成后打开cmd窗口，输入node -v，成功即会出现版本号。
npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。
在这里插入图片描述
2）安装cnpm npm的淘宝镜像
由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待2分钟左右，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息）
在这里插入图片描述
3）搭建vue-cli 脚手架构建工具
Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
继续输入npm install -g vue-cli
在这里插入图片描述
4）初始化项目
命令行输入 d: ，进入D盘。运行命令vue init webpack NodeTest，
这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的，NodeTest为项目文件夹的名称，这个文件夹会自动生成在D盘。
运行初始化命令的时候会