Angular设置第三方依赖（3）

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>

4.小结

之前导入第三方工具总是出现很多版本问题，也配置了好几遍环境，还真是不容易啊！