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.org
npm 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 。

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