Windows下安装vue开发环境

本文详细介绍了在Windows系统中安装和配置Vue.js开发环境的步骤,包括安装npm、配置全局模块路径、设置npm镜像、安装Vue CLI、Vue Router,以及解决可能出现的问题,如安装Cypress和处理npm安装错误。

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

windows下安装vue开发环境
1、安装npm
官网node进行下载
Node.js 是一个开源与跨平台的JavaScript 运行时环境。


2、检测nodejs安装
当执行完上步安装包安装后,需要进行安装是否成功,win+r打开运行,输入cmd后进入命令行界面。分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。

安装完后的目录如下图所示

3、配置npm安装全局模块路径与缓存路径
NPM是随同NodeJS一起安装的包管理工具

一般,在进行npm install ...等命令全局安装时,默认的会将模块安装C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中。

此时可不进行修改,但便于对C盘数据进行管理,此时这里配置我们自定义的全局模块安装路径和缓存路径,在当前的nodejs安装目录下新建两个文件夹,分别为node_global和node_cache`。

此时需要win+r打开运行,输入cmd进入命令行界面,分别输入以下内容执行

npm config set perfix "D:\Program Files\nodejs\node_global"
npm config set cache  "D:\Program Files\nodejs\node_cache"
 
配置一个镜像站,为了提升速度,

输入命令 npm config set registry=http://registry.npm.taobao.org 配置镜像站

检查一下镜像站行不行命令

npm config get registry

更新一下npm

npm install npm -g
 
3.1 node环境变量配置
在系统变量中新建NODE_PATH


在用户变量中编辑用户变量的path,修改对应的npm的路径值为上文中自定义的node_global路径


4. 安装Vue
Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。

4.1 安装vue-cli
vue-cli 是一个官方发布vue.js 项目脚手架,一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

运行cmd调出命令行窗口。命令行里输入:npm --version,显示npm版本大于3.0才能安装vue-cli。
输入npm install -g @vue/cli,这就开始安装了。
4.2 安装Vue
npm install vue -g
1

在global的模块目录下就能找到vue

4.3 安装Vue-router
这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。

npm install vue-router -g
1
查看vue版本


5 运行Demo
切换到根目录

运行命令

npm install -g @vue/cli-init
1

初始化,安装依赖

安装依赖
npm install
运行
npm run dev
打包
npm run build
1
2
3
4
5
6
生成静态文件,打开dist文件夹下新生成的index.html文件

出现页面


如果页面空白

运行命令

cnpm install -g http-server
1
再重新打开

6 一些问题
在执行命令npm install 出现问题则

报错原因: 找不到,esbuild/esbuild.exe 这个文件。

当前目录执行下列命令

node ./node_modules/esbuild/install.js
1
执行如下命令,将 npm 下载源改为淘宝的镜像库:

npm install -g cnpm --registry=https://registry.npm.taobao.org
1
7 安装Cypress
在你想要放置Cypress的地方建立文件夹

以管理员身份打开命令提示符进入该文件夹

然后运行npm init 命令

在你之前新建的文件夹下可以看到一个package.json文件。

在执行Cypress的安装命令

cnpm install cypress --save-dev
1
在安装cnpm之后,需要下载的模块尽量用cnpm下载
————————————————
版权声明:本文为优快云博主「一只小木头.」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/weixin_42900442/article/details/120855416

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值