首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue开发环境工具node

vue项目开发环境工具node搭建过程

2023-09-28 16:38:56 作者：玉离骚

最近在开始接触做vue框架的前端项目,以前用的前端比如html,js,css等都是比较原生的,写好后直接浏览器打开就行,今天就先记录一下vue的开发运行搭建过程,感兴趣的朋友一起看看吧

最近在开始接触做vue框架的前端项目，以前用的前端比如html，js，css等都是比较原生的，写好后直接浏览器打开就行。但vue跟java一样是需要编译的，和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下

nodejs 等同于jdk，使得js可以跨平台visual Studio Code 类似idel、eclipse等开发工具（也可以选别的开发工具）

一、下载安装node.js

选这个长期支持的版本就好（就像jdk一样目前主流还是1.7和1.8的版本），想下载最新版本也行。下载后双击安装，一直点击下一步啥也不用修改勾选完成安装（默认安装目录C:\Program Files\nodejs\，不想装C盘就改成别的目录）。然后设置系统环境变量，双击path添加一行如下填上nodejs的安装目录（win7是在path的值后追加 ;C:\Program Files\nodejs\）

在这里插入图片描述

二、验证安装成功

输入如下两个命令，显示版本号说明安装成功（和验证jdk安装类似）

node -v
npm -v

三、查看修改模块下载位置

（非必须可省略，有点类似mevan自定义本地仓库地址，反正有默认的下载存放路径，想改成别的按如下去改）

npm get prefix  # 查看 全局模块的存放路径
npm get cache  # 查看 缓存默认存放路径
npm config set prefix "你的新路径"  # 修改 全局模块的存放路径
npm config set cache "你的新路径"  # 修改 全局模块的存放路径

四、修改镜像

（非必须但建议，类似修改maven的settings.xml文件里面的仓库地址）由于npm的服务器在国外下载速度慢卡，所以大家一般更换为淘宝镜像https://registry.npm.taobao.org，可以参考下面命令替换镜像地址即可。

npm config get registry  # 查看当前使用的镜像 默认是 https://registry.npmjs.orgnpm config set registry https://registry.npm.taobao.org/  # 更换npm镜像

这两个命令牢记一下，后续开发中可能会常用。因为有些公司可能有自己的私有镜像地址，不同的项目用的镜像地址不同，所以会来回切换。切记镜像不切换，有些依赖包就下载不下来，项目自然也就运行报错，跟java一样的。

cnpm安装(淘宝提供的，主要用于下载模块)

下载依赖包有时候通过npm命令，部分东西下载不下来但通过cnpm却可以，所以还是有必要安装一下，安装也就简单就一行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org  # 安装
cnpm -v  # 检查是否安装成功

执行效果如下

安装完成后，会多出如下文件夹。不过不用管，上面查看cnpm版本执行成功就ok

五、安装VSCodeUserSetup-x64-1.73.1.exe

网上搜索visual Studio Code下载程序包后，也一直下一步按完成安装即可。安装后是英文版的，首次打开的时候右下角会有个弹窗提示安装汉化包直接点击，安装后重启vscode。如果没弹窗，点击左测第四个菜单“拓展”（相当于idel的plus，装插件的地方），输入language 选择chinese进行安装。