配置开发环境

Vue的配置和使用

配置环境

一、安装node.js

nodejs官网open in new window 历史版本open in new window

官网：https://nodejs.org/en/download/
历史版本：https://nodejs.org/en/download/releases/

Node是否安装完成

node -v

npm是否可以使用

npm -v

npm更新版本

npm install npm -g

二、设置nodejs prefix（全局）和cache（缓存）路径

1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

2、设置缓存文件夹，设置全局模块存放路径

npm config set cache "D:\vueProject\nodejs\node_cache"

npm config set prefix "D:\vueProject\nodejs\node_global"

三、基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行命令nrm ls查看可选的源

npm 安装 nrm

npm install nrm -g

其中，带*的是当前使用的源;如果要切换到taobao源，执行命令nrm use taobao。

nrm ls

增加定制的源，特别适用于添加企业内部的私有源，执行命令 nrm add <registry> <url>，其中reigstry为源名，url为源的路径。删除源。

// 增加源
nrm add registry http://registry.npm.frp.trmap.cn/

// 删除源
nrm del

四、设置环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2、修改系统变量PATH

3、新增系统变量NODE_PATH

五、安装Vue脚手架

安装vue脚手架

npm install @vue/cli-init -g

安装最新版vue脚手架

npm install @vue/cli -g

安装最新版vue脚手架后可以通过命令行和可视化界面创建vue项目

vue ui

等待自动打开浏览器管理页面即可。

六、检查是否安装完成

Node是否安装完成

node -v

npm是否可以使用

npm -v

cnpm是否可以使用

cnpm -v

yarn是否可以使用

yarn -v

Vue脚手架是否安装完成（大写的V）

vue -V

Vue脚手架包含的功能

vue -h

七、包管理工具

一般有以下几种

npm
yarn
pnpm
cnpm

npm

安装（install）即下载包。由于 npm 的官方 registry 服务器位于国外，可能受网速影响导致下载缓慢或失败。

本地安装（install 可以简写为 i）

npm install 包名
npm i 包名

全局安装

npm install --global 包名
npm i -g 包名

是否安装成功

npm -v

yarn

yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理

1、通过并行下载提高了包的下载速度
2、引入了 yarn.lock 文件，存储包之间的依赖关系，保证成员之间的包版本一致
3、有了 yarn.lock 文件，不用每次计算各个包之间的版本依赖，安装速度更快等等

安装

npm install -g yarn

是否安装成功

yarn -v

初始化

yarn init [--yes/-y]

常用命令

# 初始化一个项目
yarn init
# 装包
yarn add packagename
yarn add packagename --dev
# 更新包
yarn upgrade packagename
# 删除包
yarn remove packagename
# 安装所有包
yarn
yarn install
# 发布包
yarn publish
# 查看包的缓存列表
yarn cache list
# 全局安装包 == npm -g
yarn global

pnpm

pnpm是一种新起的包管理器，从npm的下载量看，目前还没有超过yarn，但它的实现方式值得主流包管理器学习，某些开发者极力推荐使用pnpm

从结果上来看，它具有以下优势：

目前，安装效率高于npm和yarn的最新版
极其简洁的node_modules目录
避免了开发时使用间接依赖的问题
能极大的降低磁盘空间的占用

安装

npm install -g pnpm

使用

后续使用把npm改成pnpm即可。

cnpm

npm 的默认官方下载源是 https://registry.npmjs.org/，国内访问经常掉线。因此淘宝推出了淘宝源 https://registry.npm.taobao.org

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

是否安装成功

cnpm -v

后续使用把npm改成cnpm即可。

cnpm 的坑：package-lock.json是用来锁定安装时的包的版本号，如果之前用 npm 安装产生了package-lock.json，后面再用cnpm来安装package.json、package-lock.json安装可能会跟你安装的依赖包不一致，这是因为 cnpm 不受package-lock.json影响，只会根据package.json进行下载。

总结

当然，如果接手一个已有的项目，发现已存在package-lock.json文件就使用 npm，发现有yarn.lock文件就选用yarn，来防止和同事的包版本不一致

八、编辑器

常见编辑器

Visual Studio Code
HBuilder
Sublime Text
WebStorm

Visual Studio Code

Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。

微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

下载地址：https://code.visualstudio.com/

建议安装插件来增强编辑器的可用性和美观性。

HBuilder

前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。

优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。

下载地址：http://www.dcloud.io/

Sublime Text

Sublime Text是一个轻量级的编辑器，也是支持各种编程语言，Sublime Text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用Sublime就是要使用其快捷键和插件。

Sublime Text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。

下载地址：http://www.sublimetext.com/

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。

目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

下载地址：https://www.jetbrains.com/webstorm/

九、工具

Postman

在项目开发过程中，经常会遇到前端或后端开发工作延迟，可能阻碍测试团队有效地完成工作的问题。
那么，在多个接口相互依赖，且接口文档及接口的响应数据都比较完善的情况下，不调用依赖接口测试当前接口呢？
Postman很好的解决了这一问题，它可以mock模拟依赖接口的返回值，这样就可以专注的测试当前接口。

官网：https://www.postman.com/downloads/

Mock

在业务依赖的关系接口未开发出来时，测试人员为了保证项目的测试进度不受影响，就需要构造出来一个虚拟的接口来进行一系列的接口测试

本文参考：

# 配置开发环境

# Vue的配置和使用

# 配置环境

# 一、安装node.js

# 二、设置nodejs prefix（全局）和cache（缓存）路径

# 三、基于 Node.js 安装cnpm（淘宝镜像）

# 四、设置环境变量

# 五、安装Vue脚手架

# 六、检查是否安装完成

# 七、包管理工具

# 八、编辑器

# 九、工具

配置开发环境

Vue的配置和使用

配置环境

一、安装node.js

二、设置nodejs prefix（全局）和cache（缓存）路径

三、基于 Node.js 安装cnpm（淘宝镜像）

四、设置环境变量

五、安装Vue脚手架

六、检查是否安装完成

七、包管理工具

八、编辑器

九、工具