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

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

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

一、下载安装node.js

官方下载地址 https://nodejs.cn/download/

选这个长期支持的版本就好（就像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进行安装。

切换语言 快捷键Ctrl+Shift+P会弹出命令窗口，输入“configure language”回车，选择需要切换的语言

六、运行项目

1 导入项目

先从git/svn拉下代码到本地，点击菜单栏 file–> 打开文件夹，选择到你代码存放的那个文件夹， 这样就把项目导入了。先介绍一下的布局和常用按钮菜单（和idel的使用差不多）

“控制台”和“终端”的唤起

方法1 ： 点击菜单栏的查看，再点击“控制台”或“终端”即可。

方法2 ： 快捷键是ctrl + shit + Y， 更多功能的快捷键,可以点击 帮助 --> “键盘快捷方式参考” 会跳转浏览器展示一个pdf给你. 点击查看

如果没有 控制台 终端 等菜单，右键给对应的打勾就显示了

2 下载依赖

点击终端 输入命令 npm install 或者 npm i (npm 也可以替换为cnpm)

下载完成后， 你的项目下会多出一个node_modules的文件， 这就是执行后下载下来的依赖包了。相当于maven的本地仓库一样，只不过maven是所有项目公用，它却是项目独享。如果有部分没下载成功，可以尝试删除这个文件夹重新执行命令进行重新下载

3 运行项目

在项目的跟目录下面找到package.json 这个文件，scripts参数后面的值，就是可以运行的服务名称。ctrl+shfit+唤起 终端 ，输入命令 npm run 项目服务名称

执行命令 npm run server

复制上面local的url 地址到浏览器打开，即可看到vue项目的首页，项目启动成功。如果需要打包项目，执行命令 npm run build 。

项目的代码结构介绍和常用功能，可以参考我另外一篇

到此这篇关于vue项目开发环境工具-node的文章就介绍到这了,更多相关vue开发环境工具node内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论