首页 > 其他分享 >前端开发环境的搭建及相应工具的下载

前端开发环境的搭建及相应工具的下载

时间:2022-12-28 18:35:19浏览次数:50  
标签:npm node Vue 查看 版本 nvm 前端开发 下载 搭建

记录下更换电脑后环境的搭建、相应的开发工具的下载和配置、npm工具包等

1. node环境

Node官网

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 下载

nvm工具的GitHub主页

nvm的GitHub下载地址

在相应的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

cnpm 的 npm 主页 )

查看npm的仓库地址源:

npm config get registry
#  默认地址 https://registry.npmjs.org/

既然可以查看,自然可以修改:(我一般不改,选择使用cnpm)

npm config set registry xxxxx(地址)

强调:

http://npm.taobao.orghttp://registry.npm.taobao.org 已经在 2022.06.30 号正式下线和停止 DNS 解析。

原来的不能用了,现在各种文章还在写taobao仓库,很离谱。

原文地址

由于 npm 的资源仓库在国外,因此可能在下载依赖的时候会很慢,所以可以下载cnpm,并设置仓库地址为npm镜像,就可解决下载资源包慢的问题。

npm install cnpm -g --registry=https://registry.npmmirror.com

4. yarn

yarnfacebook 发布的一款取代 npm 的包管理工具。Yarn 1.X 中文文档

Yarn2 中文文档

# 全局安装,两者选其一
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 验证安装是否成功

  1. Win + R键唤出 运行工具,输入cmd,回车。
# 查看版本,验证是否安装成功
git --version
  1. 鼠标右键会出现
    • 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

如今可以使用 ViteVue 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

相关文章

  • Python抖音直播录屏 || 下载,支持多主播同时录制
    抖音作为当今最火的自媒体之一,是自媒体人素材的来源之一,自从电商直播火爆以后,抖音似乎也迎来了业务的新高度,反正直播业务开展如火如荼,那么我们进行直播录制有什么作用呢?在热......
  • Web 批量大文件上传下载
    ​ 文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法......
  • Linux 搭建GIT服务
    安装下载源码包:点击下载,本文以2.39.0版本为例。 解压缩:tar-zxfgit-2.39.0.tar.gz当前文件路径如下: 创建安装目录:mkdir/data/git/git2390切换至解压......
  • CentOS7.2基于LAMP搭建WordPress,并自定义Logo和名称
    本次搭建LAMP+Wordpress环境如下MySQLphpWordpress_CN4.9ApacheCentOS7.2192.168.200.101、安装mariadb、php、httpd、wget2、测试php3、下载wordpress并配置4、网页......
  • 解决二进制文件下载乱码问题
    好久没写博客了,突然想记录点什么。前段时间遇到一个问题,记录一下,以后遇到可以找到解决方案。事情的原由是这样的,后端返回一个二进制的csv文件让前端进行下载,前端采用axio......
  • (五)OpenStack---M版---双节点搭建---Nova安装和配置
    1.创建nova和nova_api数据库2.获得admin凭证来获取只有管理员能执行的命令的访问权限3.创建服务证书,用户和角色4.创建Compute服务API端点5.Controller节点安装......
  • Python 通过关键词下载百度图片
    打开百度图片后,输入相关关键词,根据分析,发现百度图片初始只会渲染部分图像到页面上,随着滚轮下滚,就会请求新的数据,因此我们可以判断页面是经过ajax请求数据后,渲染至页面。百度......
  • Python 解析西瓜视频 | 无水印高清下载
    很多小伙伴都有使用西瓜视频,现在西瓜视频作为字节旗下的全家桶一员,拥有很多优质的视频,是很多自媒体小伙伴需要的。但是如何无水印下载这些西瓜视频呢?却让很多人为难,缺少这个......
  • Python批量下载公众号话题下音频文件
    宝宝喜欢听父母讲故事,年轻人喜欢听文章,年纪大的人喜欢听评书,很多人喜欢听不一样的东西,文案能够从文字转化成为语言说出去,那么效果肯定是大有不同。想必在日常生活中,大家都可......
  • Python 多进程下载站点所有小说
    小说,宅男必备,也是当今社会人们打发时间的一种方式。今天给大家分享的,喜欢看小说的同学可以收藏起来了!!目标站点:https://www.zhenhunxiaoshuo.com爬取思路:获取站点分类下的书......