1.创建一个新的工程

2.win+r，输入cmd,打开终端，然后进入刚才所创建的文件中，同时使用小程序开发工具打开刚才创建的项目

3.终端中输入 npm init(我这里都是快速回车默认选择了),这样项目中会出现一个node_modules的文件

4.继续输入npm i

5.安装插件weui,输入npm i weui-miniprogram（可能会失败  可以改用 npm i weui-miniprogram -S --production）

6.开发者工具上选择工具-npm，项目中多了一个miniprogram_npm的文件夹

7.app.wss中引入weui.wxss  @import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

8.创建一个页面，index.json中引入 

    "mp-dialog": "weui-miniprogram/dialog/dialog"

index.wxml文件中添加

<view class="container">
  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog>
</view>

9.保存编译

错误提示：不知道为啥，按照步骤下来也是会出现报错 

报错["usingComponents"]["mp-dialog"] 未找到

"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"改为"mp-dialog": "weui-miniprogram/dialog/dialog"

解决方法 cmd中敲入 npm i weui-miniprogram -S --production 然后再重新构建npm

1. 在GitHub上https://github.com/hyy520/weui-wxss-master
   下载程序代码，解压后可以看到如下目录：
   
2. 将dist导入微信开发者工具
   
3. 删除app.wxss下内容加入@import ‘/style/weui.wxss’;

/**app.wxss**/
@import '/style/weui.wxss';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

4. 创建pages文件夹穿件index文件夹，然后开始编写代码，app.js添加路径进行编译测试
   

微信小程序引入WeUI组件库（详细成功案例，带图）

本章选择官方引入组件库的方式为第一种
通过npm方式（第二种）引入WeUI通道

第一步（引入WeUI库）
备注：
1.通过该方式引入，可省略import样式库
2.第一步为最重要的一步，官方文档看不到的一步【快速上手】

第二步（页面wxml文件，写组件代码）

第三步（页面json文件，注册组件）

第四步（看效果）

总结：极力推荐本章方法，方便快捷简单易上手，喜欢的请点赞！！！

官网正确打开姿势