小程序安装npm weui组件库

1、安装npm

1、用微信开发者工具新建基础项目

小程序安装npm weui组件库_第1张图片

2、在该项目目录下执行

npm init

 小程序安装npm weui组件库_第2张图片

3、 在该目录下继续执行命令行,新增空的node_modules文件夹

npm i miniprogram-sm-crypto --production

 小程序安装npm weui组件库_第3张图片

4、点击微信开发者工具右侧详情

小程序安装npm weui组件库_第4张图片

 

5、开发者工具菜单栏点击---》工具----》构建npm

小程序安装npm weui组件库_第5张图片

小程序安装npm weui组件库_第6张图片

完成后新增miniprogram_npm文件夹 

小程序安装npm weui组件库_第7张图片
 完成。

2、安装WeUI组件库

1、安装:在该目录下终端中执行

npm install weui-miniprogram

安装完成后重新点击工具菜单下构建npm菜单,在miniprogram_npm文件夹下新增weui-miniprogram文件夹

小程序安装npm weui组件库_第8张图片

2、使用:首先要在 app.wxss 里面引入 weui.wxss,如果是通过 npm 引入,需要先构建 npm(“工具”菜单 --> “构建 npm”)

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

 3、新建test页面以Icon组件为例测试是否引用成功,在test.json中注册icon组件

小程序安装npm weui组件库_第9张图片

在test.wxml文件中使用组件

小程序安装npm weui组件库_第10张图片

页面展示

小程序安装npm weui组件库_第11张图片

引入weui组件库成功。

你可能感兴趣的:(小程序安装npm weui组件库)