先把基础环境“摸清楚”，别上来就瞎装
我发现很多人装不上uni-ui的核心原因，不是步骤错了，而是基础环境没搞对——就像你要搭积木，地基没搭稳，积木肯定会倒。我先问你几个问题，你自己先核对：
你用的vue-cli版本是多少？uni-ui要求vue-cli 4.x及以上版本（比如4.0.0到5.x都可以），要是你用的是3.0甚至更低，肯定会报“依赖无法解析”的错。怎么查版本？打开终端（Windows用 cmd，Mac用 Terminal），输入vue version，回车就能看到。我去年帮另一个朋友装的时候，他的vue-cli是3.5.0，结果装uni-ui时直接弹出红底白字的错误：“UNMET PEER DEPENDENCY @vue/cli-service@^4.0.0”，后来升级到4.5.15就好了——升级命令是npm install -g @vue/cli，记得要加-g全局安装。
再问第二个问题：你的uni-app项目是用正确的模板创建的吗？很多人图省事，直接用vue create my-project创建了普通Vue项目，然后想装uni-ui——这肯定不行！uni-app的vue-cli模板得用vue create -p dcloudio/uni-preset-vue my-project这个命令创建，它会帮你生成uni-app专用的项目结构（比如pages目录、pages.json配置文件）。我之前有个做小程序的朋友，就是因为用了普通Vue模板，装完uni-ui后报“找不到uni-app入口文件”，后来重新建项目才解决——你要是不确定自己的项目对不对，看看根目录有没有pages.json文件，没有的话就是模板错了，得重新建。
还有个细节要注意：Node.js版本别太低， 用12.x以上（比如14.x、16.x都可以）。怎么查Node版本？输入node version就行，要是版本低了，升级一下（去Node.js官网下LTS版，或者用nvm管理版本）。我同事之前用Node.js 10.0，装uni-ui时报“ES module not supported”，升级到14.17就好了——这些基础环境要是错了，后面再怎么折腾都是白费力气。
核心步骤就3步，每一步都要“盯紧”细节
环境没问题了，接下来的步骤其实就3步，但每一步都有“容易踩的坑”——我帮人调过不下10次，这些坑我闭着眼都能数出来。
第一步：用对命令装依赖，别搞混npm和yarn
装uni-ui的命令就一个：npm install @dcloudio/uni-ui（或者用yarn add @dcloudio/uni-ui）。但我要提醒你：别混着用npm和yarn——比如你之前用npm装过其他依赖，现在又用yarn装uni-ui，会导致node_modules目录混乱，轻则报错，重则项目跑不起来。我自己习惯用npm，因为它的报错信息更“直白”，比如装的时候要是缺依赖，它会直接告诉你“需要安装@vue/composition-api”；要是你用yarn，记得先把之前的node_modules删了，再用yarn装。
装的时候要注意终端的输出——要是出现added 12 packages in 3s这种绿色提示，说明装成功了；要是出现warning或者error，一定要停下来看内容。比如我之前遇到过“warning: peer dependency @vue/composition-api@^1.0.0-rc.11 not installed”，这说明uni-ui依赖@vue/composition-api这个库，得补装：npm install @vue/composition-api——别嫌麻烦，缺啥补啥就行。
第二步：改配置文件，这步最容易漏
装完依赖还不够，得改两个配置文件，不然组件根本用不了——这也是90%的人会踩的坑。
第一个要改的是babel.config.js。打开这个文件，看看里面的配置是不是长这样：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
要是你的配置里没有@vue/cli-plugin-babel/preset，得加上——因为uni-ui用了ES6+的语法（比如箭头函数、解构赋值），需要babel转译成浏览器/小程序能识别的代码。我同事之前的babel.config.js里用了老版本的@babel/preset-env，结果编译时报“Unexpected token ‘=>’”，后来换成@vue/cli-plugin-babel/preset就好了。
第二个要改的是pages.json——这步是“组件能不能显示”的关键。uni-ui是“按需引入”的，用哪个组件就得注册哪个，不然页面找不到组件。比如你想用uni-button（按钮组件），就得在pages.json里的usingComponents里加一行：
"usingComponents": {
"uni-button": "@dcloudio/uni-ui/lib/uni-button/uni-button"
}
这里要注意3个细节：
uni-button不能写成uni-btn（我同事之前就犯过这错，查了半小时才发现）； lib不能少：uni-ui的组件都放在lib目录下，少了这层路径，会报“module not found”； uni-input（输入框），就得再加一行"uni-input": "@dcloudio/uni-ui/lib/uni-input/uni-input"。 我给你整理了个“常用组件注册表”，直接复制用就行：
| 组件名 | 注册路径 |
|---|---|
| uni-button | @dcloudio/uni-ui/lib/uni-button/uni-button |
| uni-input | @dcloudio/uni-ui/lib/uni-input/uni-input |
| uni-list | @dcloudio/uni-ui/lib/uni-list/uni-list |
第三步：验证组件是否生效，用“最笨的方法”最快
改完配置，是不是就大功告成了？别着急，得验证一下——我每次装完都会做个“最小测试”：
打开pages/index.vue（或者你项目的首页），在里加个uni-button：
<!-
新增的测试按钮 >
我是uni-ui的按钮
然后运行项目：npm run dev:h5（或者npm run dev:mp-weixin测小程序）。要是用H5模式，打开浏览器输入http://localhost:8080，你会看到一个蓝色圆角的按钮（这是uni-ui的默认样式）——要是显示成这样，说明成功了；要是还是原生的灰色按钮（或者直接显示“组件未找到”），说明配置没生效，得回头查：
pages.json里的usingComponents没写对？ lib？ babel.config.js的配置错了？ 我同事之前验证的时候，按钮显示成了原生样式，后来发现pages.json里的usingComponents写错了——他把uni-button写成了uni-button.vue（多了.vue后缀），删了之后立马就好了。
你要是跟着做的时候遇到问题，比如某个步骤报错，可以把错误信息发我评论区，我帮你看看——毕竟我踩过的坑比你吃过的饭还多。要是成功了，也欢迎回来告诉我，让我沾沾你的喜气～
你要是查出来vue-cli版本低于4.x，别慌，我教你一步一步升上去。先打开终端——Windows用cmd，Mac用Terminal就行，输入vue version（或者嫌麻烦输vue -V也可以，结果是一样的），回车之后就能看到你的版本号了，比如3.5.0或者3.9.0，只要开头是3字开头，那就得升级。升级的命令很简单，输npm install -g @vue/cli，记住一定要加-g，这是全局安装的意思，不然只升了当前项目的版本，下次新建项目还是老版本，没用。
升级的时候可能会遇到点小状况，比如Windows系统弹出“需要管理员权限”的提示，这时候你右键点cmd，选“以管理员身份运行”再输命令就行；Mac的话可能要在命令前面加sudo，比如sudo npm install -g @vue/cli，输密码的时候别紧张，虽然屏幕上看不见你输的字符，但其实是在输入的，输完回车就好。要是升级速度特别慢，卡半天不动，你可以先换个淘宝的npm镜像源，输npm config set registry https://registry.npm.taobao.org，换完再升级，速度能快很多。升级完成后再输一遍vue version，确认一下版本变成4.x或者5.x了（比如4.5.15、5.0.8都可以），这时候你再去装uni-ui，就不会再因为版本低报错啦。
vue-cli版本低于4.x怎么办？
先通过终端输入vue version确认版本，若低于4.x，执行npm install -g @vue/cli全局升级到4.x或5.x版本（如4.5.15），升级完成后重新检查版本即可继续安装uni-ui。
用普通Vue模板创建的项目能装uni-ui吗？
不能。uni-ui依赖uni-app专用的项目结构（如pages.json配置文件），需用vue create -p dcloudio/uni-preset-vue my-project命令重新创建项目，确保根目录有pages.json后再安装uni-ui。
uni-ui组件注册后不显示怎么办？
先检查pages.json的usingComponents配置：组件名是否正确（如uni-button不要加.vue后缀）、路径是否包含lib目录（如@dcloudio/uni-ui/lib/uni-button/uni-button）；再确认babel.config.js是否使用@vue/cli-plugin-babel/preset；最后重启项目，一般能解决。
安装uni-ui时提示“缺少依赖”怎么办？
根据终端报错信息补装对应依赖即可，比如提示“missing @vue/composition-api”，执行npm install @vue/composition-api；若提示其他依赖缺失，同理安装对应的包（如@dcloudio/uni-app）。
怎么快速验证uni-ui是否安装成功？
在项目首页（如pages/index.vue）的中添加uni-button组件（如测试按钮），运行npm run dev:h5（H5模式）或npm run dev:mp-weixin（小程序模式），若看到蓝色圆角的uni-ui默认样式按钮，说明安装成功。
