Angular设置第三方依赖（3）

最新推荐文章于 2024-01-16 17:06:06 发布

置顶亮靓-Demi

最新推荐文章于 2024-01-16 17:06:06 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-angular

本文链接：https://blog.csdn.net/lyj4495673/article/details/80874687

前端-angular 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Node.js项目中安装并使用第三方库，如jQuery和Bootstrap等，并提供了解决版本冲突的方法及具体实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装第三方工具

//默认情况安装的都是最新版本
cnpm install jquery --save
cnpm install bootstrap --save
//安装指定版本
cnpm install jquery@3.3.1 --save

安装完成后你会在package.json文件中发现安装的工具
这里写图片描述

2.在项目中引用

将你所安装的第三方工添加到js属性里，在node_modules下有安装工具的路径
这里写图片描述
将jQuery引入到项目中后，ts文件仍不识别$符号，要安装类型描述文件

Cnpm install @types/bootstrap --save-dev
//如果遇到版本问题请安装指定版本
cnpm install @types/jquery@2.0.39 --save-dev
Cnpm install @types/bootstrap@3.3.32 --save-dev

这里写图片描述

3.简单实例

//命令生成组件
ng g component navbar（组件名）

这里写图片描述

//导航栏的HTML
  <div class="container">
     <!--用来写程序名字的div-->
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collaspse">
         <!--横线-->
         <span class="icon-var"></span>
         <span class="icon-var"></span>
         <span class="icon-var"></span>
       </button>
       <a class="navbar-vrand" href="#">在线竞拍</a>
     </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
         <ul class="nav navbar-nav">
           <li><a href="#">关于我们</a></li>
           <li><a href="#">联系我们</a></li>
           <li><a href="#">网站地图</a></li>
         </ul>
      </div>
  </div>
</nav>