记录下更换电脑后环境的搭建、相应的开发工具的下载和配置、npm工具包等
![](/i/l/?n=23&i=blog/2240374/202212/2240374-20221228154011579-1079678468.jpg)
1. node环境
1.1 选择版本
总共有两个版本:长期维护版本/稳定版,最新版/尝鲜版。
一般可以直接下载LTS稳定版。
如果想下载其他版本,可点击页面上的DOWNLOADS
,在页面选择Previous Releases
,以往版本。
下载并进行安装,这会同时安装node
环境以及npm
工具。
1.2 验证
键盘win
+ R键
,输入cmd
,打开终端命令行窗口。
输入:
# 查看node安装的版本
node -v
# 查看npm 版本
npm -v
2. node版本控制工具-nvm
Windows:系统使用 nvm-windows
Mac:可以选择使用 n 工具。n工具的GitHub主页
npm install -g n
以下选择windows环境下的nvm工具的使用:
2.1 下载
在相应的GitHub页选择安装包或压缩包进行下载
2.2 使用命令
// nvm命令行操作命令:
nvm nvm list 是查找本电脑上所有的node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install 安装最新版本nvm
nvm use <version> ## 切换使用指定的版本node
nvm ls 列出所有版本
nvm current显示当前版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
nvm on 打开nodejs控制
nvm off 关闭nodejs控制
nvm proxy 查看设置与代理
nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.
nvm uninstall <version> 卸载制定的版本
nvm use [version] [arch] 切换制定的node版本和位数
nvm root [path] 设置和查看root路径
nvm version 查看当前的版本
从中筛选出常用的命令:
nvm current
: 显示当前版本nvm list
:查看已经安装的版本nvm install <version>
:<version>
可以指定版本,也可以是latest
表示下载最新版本,或者是lts
表示最新的 LTS 版本nvm uninstall <version>
: 卸载某个特定的版本.nvm use <version>
: 选择使用某个版本nvm version
: 展示当前nvm的版本
3. cnpm
查看
npm
的仓库地址源:npm config get registry # 默认地址 https://registry.npmjs.org/
既然可以查看,自然可以修改:(我一般不改,选择使用
cnpm
)npm config set registry xxxxx(地址)
强调:
http://npm.taobao.org
和http://registry.npm.taobao.org
已经在 2022.06.30 号正式下线和停止 DNS 解析。原来的不能用了,现在各种文章还在写taobao仓库,很离谱。
由于 npm
的资源仓库在国外,因此可能在下载依赖的时候会很慢,所以可以下载cnpm
,并设置仓库地址为npm镜像,就可解决下载资源包慢的问题。
npm install cnpm -g --registry=https://registry.npmmirror.com
4. yarn
yarn
是 facebook
发布的一款取代 npm
的包管理工具。Yarn 1.X 中文文档
# 全局安装,两者选其一
npm install -g yarn
cmpm install -g yarn
# 查看yran安装版本
yarn --version
# 显示命令列表
yarn help
5. Git工具
当前章节只介绍基础下载安装及配置,如需了解
Git
开发命令可移步Git的基本使用。
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git 官网
5.1 下载
直接点击Download
即可,下载安装就可。
5.2 Git 配置
5.2.1 验证安装是否成功
Win
+R键
唤出 运行工具,输入cmd
,回车。
# 查看版本,验证是否安装成功
git --version
- 鼠标右键会出现
Git Bash Here
Git GUI Here
5.2.2 配置用户信息
鼠标右键,点击Git Bash Here
使用Git Bash
工具。
# 设置用户名
git config --global user.name "<用户名>"
# 设置用户邮箱
git config --global user.email "<电子邮件>"
注意:该配置会在github主页上显示谁提交了该文件
# 查看配置
git config --list
6. Vue
如今可以使用 Vite
和 Vue CLI
脚手架进行项目的构建。
更多内容可查看Vue CLI 和 Vite的学习笔记
6.1 Vite
Vite 是一个轻量级的、速度极快的构建工具,对 Vue SFC 提供第一优先级支持。作者是尤雨溪,同时也是 Vue 的作者!
要使用 Vite 来创建一个 Vue 项目,非常简单:
npm init vue@latest
这个命令会安装和执行 create-vue,它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
- 要学习更多关于 Vite 的知识,请查看 Vite 官方文档。
- 若要了解如何为一个 Vite 项目配置 Vue 相关的特殊行为,比如向 Vue 编译器传递相关选项,请查看 @vitejs/plugin-vue 的文档。
6.2 Vue CLI
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链。
安装:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建一个项目:
vue create my-project
# OR
vue ui
7. React
React 创建新的单页应用,有很多方式。
7.1 npx
使用 npx
进行构建。 npx
是附带在 npm5.2+
版本的运行工具,无需下载。 (Node >= 8.10 和 npm >= 5.6
)
# 构建项目
npx create-react-app <工程名称>
# 进入项目
cd <工程名称>
# 启动项目
npm start
7.2 npm
npm init <initializer>
在 npm 6+ 版本上有效
npm init react-app <工程名称>
7.3 Yarn
yarn create
在 Yarn 0.25+ 版本上有效
yarn create react-app <工程名称>
8. 开发工具
8.1 VsCode
轻量级开发工具,只有基础功能,需要其他功能则需要下载插件,无需付费,Visual Studio Code 官网,进入即可点击下载。
8.1.1 插件推荐
8.2 WebStorm
WebStorm: 官网。完整的开发工具,开箱即用,性能消耗相较Vscode大,且需要付费。
我写了篇简单的 webstorm 使用文章:WebStorm 工具的简单配置的使用。
结尾
可能没写完全,待更新。期待评论回复和建议。
标签:npm,node,Vue,查看,版本,nvm,前端开发,下载,搭建 From: https://www.cnblogs.com/fuct/p/17010973.html