前端框架 Angular 环境配置

简介: 使用 nvm 管理 node.js 多版本并存,并配置前端框架 Angular 的相关环境依赖。

一、安装 nvm 版本管理工具

nvm 英文全称 node.js version management,是一个 nodejs 的版本管理工具。目的是解决 node.js 各种版本存在不兼容现象,并且可以通过它可以安装和切换不同版本的 node.js

1.1 目标盘符新建文件夹

在安装 nvm 之前,我们现在目标盘符创建两个文件夹(分别是 nodejsnvm 文件夹),此处是选择 D 盘安装,如下所示:

image.png

1.2 下在 nvm 并安装

  • nvm 下载地址:https://nvm.uihtm.com/
  • 使用管理员身份运行 nvm-setup.exe

image.png

  • 设置 nvm 安装路径

image.png

  • 继续 Install 安装,安装完成后,点击 Finish

image.png

1.3 验证 nvm 是否安装成功

  • 以【管理员身份】运行 powershell ,如下所示:

image.png

  • 命令【nvm v】查看 nvm 版本信息;
  • 命令【nvm list available】查看可安装的所有版本;

image.png

  • 输入【nvm】查看更多命令说明,输出如下信息:
Running version 1.1.7.

Usage:

  nvm arch                     : Show if node is running in 32 or 64 bit mode.
  nvm install <version> [arch] : The version can be a node.js version or "latest" for the latest stable version.
                                 Optionally specify whether to install the 32 or 64 bit version (defaults to system arch).
                                 Set [arch] to "all" to install 32 AND 64 bit versions.
                                 Add --insecure to the end of this command to bypass SSL validation of the remote download server.
  nvm list [available]         : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
  nvm on                       : Enable node.js version management.
  nvm off                      : Disable node.js version management.
  nvm proxy [url]              : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
                                 Set [url] to "none" to remove the proxy.
  nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
  nvm npm_mirror [url]         : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url.
  nvm uninstall <version>      : The version must be a specific version.
  nvm use [version] [arch]     : Switch to use the specified version. Optionally specify 32/64bit architecture.
                                 nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode.
  nvm root [path]              : Set the directory where nvm should store different versions of node.js.
                                 If <path> is not set, the current root will be displayed.
  nvm version                  : Displays the current running version of nvm for Windows. Aliased as v.

出现以上信息,说明 nvm 已经安装成功,接下来我们就可以使用 nvm 来安装 node.js 实现多版本并存。

1.4 修改 settings.txt 配置

从上面的 nvm 信息中可以看出默认下载地址:

nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
nvm npm_mirror [url]         : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url.

进入 nvm 根目录,修改 settings.txt 文件配置,使用国内镜像源(受网络环境影响,默认地址可能下载缓慢)。

image.png

修改 settings.txt 文件配置信息如下:

root: D:\nvm
path: D:\nodejs
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

二、使用 nvm 配置 node.js

注意:以下命令操作,均使用管理员身份运行 powershell 执行。

2.1 nvm 安装 node.js

  • 使用 nvm 安装 node.js,上面我们已经查看了可安装的 node.js 版本信息。
# 此处选择 node.js 的 lts 版本 16.14.0
nvm install 16.14.0 

# 查看 nvm 安装的 node.js
nvm ls

# nvm 切换使用 node.js 版本
nvm use 16.14.0

# 使用 nvm 安装最新稳定版 Node.js
nvm install stable
  • 查看 node.js 版本信息,验证该 node.js 是否安装成功。
node -v
  • 查看 npm 版本信息
npm -v

如果出现如下类似的错误信息:

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然
后再试一次。
所在位置 行:1 字符: 1
+ npm v
+ ~~~
    + CategoryInfo          : ObjectNotFound: (npm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决方案:使用命令【nvm uninstall 16.14.0】卸载对应的 node.js 版本,再次执行命令【nvm install 16.14.0】重新安装 node.js 环境。

PS C:\Users\Jeffrey Chai> nvm uninstall 16.14.0
Uninstalling node v16.14.0... done

2.2 npm 全局安装 ng cli

说明:由于这里使用 nvm 安装 node.js 实现多版本并存,需要使用命令: nvm use <node.js版本号> 指定具体版本。
  • npm 全局安装 ng cli
npm install -g @angular/cli
# 或者指定版本安装
npm install -g @angular/cli@11.1.2
  • 如果安装失败,可以卸载再次重新安装,卸载命令如下:
# 全局卸载 angular/cli
npm uninstall -g @angular/cli

# 清空 npm 缓存
npm cache clean

# 删除用户目录下的相关文件夹
Delete the C:\Users\{User}\AppData\Roaming\npm\node_modules\@angular folder.

2.3 验证 ng 是否安装成功

  • 命令查看 ng 版本
ng v

输出如下信息,说明 ng cli 安装成功。

image.png

如果出现权限错误,使用管理员身份运行 powershell,执行如下命令:

PS C:\WINDOWS\system32> Set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险,如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): A
PS C:\WINDOWS\system32> Get-ExecutionPolicy
RemoteSigned

命令说明,请查看 :

三、安装 vs code 编辑器

3.1 下载并安装 vs code 编辑器

下载 vs codehttps://code.visualstudio.com/Download),选择对应操作系统环境下载安装即可。

image.png

3.2 vs code 插件安装

说明:这里使用的 ng 前端框架是 PrimeNGhttps://www.primefaces.org/primeng/

vs code 扩展里面安装如下扩展插件:

image.png

3.3 下载 ng 框架依赖包

  • 进入项目目录文件,使用 npm 安装 ng 框架依赖包。
npm i

3.4 访问 ng 网站

  • 运行 ng 项目
ng serve
# 或者直接浏览器打开
ng serve --open

浏览器输入 url 地址【http://ip:port】,访问网站。

目录
相关文章
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
447 1
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
423 1
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
348 1
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
356 6
|
前端开发 Oracle Java
【前端学java】java开发的依赖安装与环境配置(1)
【8月更文挑战第8天】java开发的依赖安装与环境配置
228 1
【前端学java】java开发的依赖安装与环境配置(1)
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
443 3
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
3236 6
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
221 0
|
前端开发 UED 开发者
无障碍设计的魔法:JSF让每个用户都能畅游数字世界!
【8月更文挑战第31天】本文介绍如何使用JavaServer Faces (JSF)构建无障碍Web应用,确保所有用户都能访问和使用。文章通过实际代码示例展示了如何利用ARIA属性增强组件、实现键盘导航、提供文本替代以及使用语义化标签等技术。无障碍设计不仅是道德责任,也是提升用户体验的关键。通过这些方法,JSF可以帮助开发者创建更加公平和包容的应用。
150 0
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
230 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式