Angular基础-搭建Angular运行环境

news/2024/9/24 14:02:55/

这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南,帮助他们快速搭建Angular开发环境,为后续的项目开发奠定基础。


​一、node.js 安装和配置

1、下载安装node.js

官方网站下载地址:Node.js (nodejs.org)

选择长期维护版本(LTS)下载。

001 - Node.js安装教程


下载完成后,双击安装包,安装Node.js,一直点下一步,直到完成。

002 - Node.js安装教程

003 1 - Node.js安装教程

测试安装是否成功。

控制台查看Node.js版本:

node -v     // 显示node.js版本npm -v      // 显示npm版本

如果出现版本号则说明安装成功。

004 - Node.js安装教程

成功显示版本说明安装成功。


2、环境配置

配置安装目录和缓存目录。

我们需要设置全局安装包的目录路径、设置 npm 包的缓存路径

安装目录下新建 “node_global”和 “node_cache” 文件夹

005 - Node.js安装教程

创建完毕后,使用管理员身份打开cmd命令窗口,输入:

npm config set prefix "C:\Program Files\nodejs\node_global" //设置全局安装包的目录路径
npm config set cache "C:\Program Files\nodejs\node_cache" //设置 npm 包的缓存路径

006 - Node.js安装教程


3、配置环境变量

首先我们检查刚刚的配置:

命令行输入:

npm config list

image 2 - Node.js安装教程

可以看到我们刚刚设置的配置:

cache=”C:\ProgramFiles\nodejs\node_cache”
prefix=”C:\ProgramFi1es\nodejs\node_g1oba1″

复制prefix的值:C:\ProgramFi1es\nodejs\node_g1oba1

此电脑右键>属性>高级系统设置>环境变量,
将prefix的值复制到环境变量系统变量的Path。

OUM8 VYCS4V3K0MYR - Node.js安装教程


4、测试是否安装成功

配置完成后,全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现以下界面即为配置成功

010 - Node.js安装教程


5、设置npm下载源为淘宝镜像源

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org),使用淘宝镜像源方式:

npm安装淘宝镜像

npm config set registry https://registry.npmmirror.com

查看是否成功:

npm config get registry

image - Node.js安装教程


二、安装Angular及Angular CLI工具

Angular CLI 是一个基于 Angular 的官方脚手架工具,用于创建和管理 Angular 项目。当执行 npm install @angular/cli 时,它会安装 Angular CLI 的最新版本,并且这个版本中包含了 Angular 的依赖。如果要安装指定版本则在@angular/cli增加@+版本号就可以,比如npm install @angular/cli@15 就是安装 Angular 版本 ^15.0.0。

Angular CLI 除了包含 Angular 本身,还提供了一套项目搭建和开发的工具,例如项目初始化、开发服务器、构建工具等。一旦安装完成,您可以使用 ng new 命令来创建新的 Angular 项目,并且可以通过 Angular CLI 提供的各种命令和配置来进行项目开发和管理。

简单来说,就是安装Angular CLI工具时包含Angular的安装,不需要单独安装Angular。

命令行输入

npm i -g @angular/cli@15

请在此添加图片描述


三、创建Angular项目

安装完成后我们新建一个项目,这里我的项目叫 empower-cloud-assistant,输入命令:

ng new empower-cloud-assistant && cd empower-cloud-assistant

请在此添加图片描述

创建过程中,会需要做出几个选择:

Would you like to share pseudonymous usage data about this project with the Angular Team

at Google under Google’s Privacy Policy 这个是问你愿不愿意将使用数据基于谷歌的隐私政策提供给 Angular 团队,这个我选的否。

其他的我都直接 Enter,直接选择是。

创建项目的命令执行完成后,我们打开命令行所处的文件夹,可以看到项目 empower-cloud-assistant 已经被创建,并且我们通过cd命令将目录切换到了该项目路径下。

请在此添加图片描述


四、引入Angular组件库/框架

接着我们引入需要的 Angular组件库/框架,这里我引入的 DevUI 的框架,输入命令:

ng add ng-devui-admin

系统会自动下载 ng-devui-admin 这个框架。

请在此添加图片描述


五、启动项目

下载完成后,我们启动这个项目,输入命令:

npm start

请在此添加图片描述

请在此添加图片描述

启动成功。

提示我们项目发布 localhost 的 4200 端口,我们浏览器访问:

请在此添加图片描述

请在此添加图片描述

可以看到我们的 Angular 项目已经部署成功。


http://www.ppmy.cn/news/1454013.html

相关文章

一款AI工作流项目:phidatahq/phidata

一款AI工作流项目:phidatahq/phidata 构建和测试功能强大的 AI 工作流程。该项目提供了一个工作流平台,可以结合大型语言模型(LLM)和各种工具,扩展模型的实用性和应用范围。[1][4][5] 开发各种 AI 助手应用,如客服聊天机器人、数据分析工具、研究助手等。phidata 提…

react中useRef是什么?有啥用?怎么用?

useRef是什么? 在 React 中,useRef 是一个 Hook,它可以用来存储一个可变的值,这个值在组件的整个生命周期内保持不变。useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递给 useRef 的参数(initialValue…

HTTP/1.1、HTTP/2、HTTP/3 的演变

HTTP/1.1、HTTP/2、HTTP/3 的演变 HTTP/1.1 相比 HTTP/1.0 提高了什么性能?HTTP/2 做了什么优化?HTTP/3 做了哪些优化? HTTP/1.1 相比 HTTP/1.0 提高了什么性能? HTTP/1.1 相比 HTTP/1.0 性能上的改进: 使用长连接的…

JAVASE---异常知识补充

异常处理机制 抛出异常 捕获异常 异常处理五个关键字:try、catch、finally、throw、throws package Exception;​public class Demo01 {public static void main(String[] args) {int a 1;int b 0;​try {//监控区域System.out.println(a/b);if(b0){//主动抛出…

python数据分析——数据分析概念定义和发展前景

数据分析概念定义和发展前景 前言一、数据分析概念二、数据的定义2.1数据的定义2.2数据的分类 三、数据的价值数据为什么具有价值 四、数据分析的目的对于企业来说 五、数据分析类型的划分5.1描述性统计分析5.2 探索性数据分析5.3 传统的统计分析方法5.4验证性数据分析 六、 数…

Three.js杂记(十五)—— 汽车展览(下)

在上一篇文章Three.js杂记(十四)—— 汽车展览上 - 掘金 (juejin.cn)中主要对切换相机不同位置和鼠标拖拽移动相机焦点做了简单的应用。 那么现在聊聊该如何实现汽车模型自带的三种动画展示了,实际上可以是两种汽车前后盖打开和汽车4车门打开…

【跟马少平老师学AI】-【神经网络是怎么实现的】(七-2)word2vec模型

一句话归纳: 1)CBOW模型: 2c个向量是相加,而不是拼接。 2)CBOW模型中的哈夫曼树: 从root开始,向左为1,向右为0。叶子结点对应词有中的一个词。每个词对应唯一的编码。词编码不等长。…

vue3项目引入VueQuill富文本编辑器(成功)及 quill-image-uploader 图像模块(未成功)

tip:重点解释都写在代码注释里了,方便理解,所以看起来比较密集 富文本基本使用 项目文件夹路径安装依赖 npm install vueup/vue-quilllatest --save 全局注册:main.js // main.js// 自己项目的一些配置(只放了主要…