uniapp项目实践第四章：如何安装uni-ui组件库

妖狐艹你老母 2024-03-23 23:59 79阅读 0赞

## uniapp项目实践：如何安装uni-ui组件库 ##

这个是组件库的官网：https://uniapp.dcloud.net.cn/component/  
![在这里插入图片描述][7afd2b2a7da0491a9119ed1ae16e1d8c.png]  
![在这里插入图片描述][d33077d82b184dda9becc84b4c434e56.png]  
由于之前安装了pnpm所以，输入`pnpm i @dcloudio/uni-ui`安装  
![在这里插入图片描述][f5ab2439497440e2ae41bdc5f897deb9.png]

*  进行相关全局配置  
    ![在这里插入图片描述][d268e054978f4e3e9e99b60ca280c98b.png]  
    ![在这里插入图片描述][77c57740fd974e92a88414c91ff40a95.png]
 *  每次在vscode更新完之后，就需要再输入`pnpm dev:mp-weixin`,更新一遍微信部分
 *  其实我们可以看到的是，如果输入上面的命令之后，下面显示一直在运行状态，然后可以动态调试，一遍建议开两个终端，另一个终端用来输入需要安装的命令。  
    ![在这里插入图片描述][eb95c2fb68aa41b285710134a7d3942a.png]  
    **安装类型声明文件**

pnpm i -D @uni-helper/uni-ui-types

![在这里插入图片描述][17f44c4750ac48e0a7f0549a6db00d7b.png]

**配置类型声明文件**

// tsconfig.json
    {
        
      "compilerOptions": {
        
        "types": [
          "@dcloudio/types",
          "@uni-helper/uni-app-types", // [!code ++]
          "@uni-helper/uni-ui-types" // [!code ++]
        ]
      }
    }

![在这里插入图片描述][d85b6b20f18a49598000891d89e5ebb5.png]

安装和配置完之后，就会发现，在代码中的相关的uniapp的相关组件就会显示高亮  
![在这里插入图片描述][2bf62cb2321549be901111f6af201a6d.png]

[7afd2b2a7da0491a9119ed1ae16e1d8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/24e01e7a5a114cc99f11bb024d6c7f62.png
[d33077d82b184dda9becc84b4c434e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fabda7d9fd5e40c9807653caf695a054.png
[f5ab2439497440e2ae41bdc5f897deb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/3cf4fc6a03f348f18cd15c7b2a8fb553.png
[d268e054978f4e3e9e99b60ca280c98b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f587876436174760b8130969cd9861fd.png
[77c57740fd974e92a88414c91ff40a95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8b930116b5a241029d13314246faad65.png
[eb95c2fb68aa41b285710134a7d3942a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9d65f74fa605461492cde8787e87c828.png
[17f44c4750ac48e0a7f0549a6db00d7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/3cc2ee466cab4518bc84e866249000c4.png
[d85b6b20f18a49598000891d89e5ebb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/aad0149e3a4e449f8db83ecdd4a29d5b.png
[2bf62cb2321549be901111f6af201a6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/02d6afc985864d9ea12f74177d2cacef.png