uniapp安装uview-ui踏坑

原创已于 2023-05-12 15:33:02 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #ui #npm

于 2023-05-11 17:48:08 首次发布

前端专栏收录该内容

10 篇文章

订阅专栏

文章讲述了在Vue项目中安装和使用uview-ui的步骤，包括npm安装uview-ui，配置vue.config.js，引入样式，设置page.json。遇到的错误是由于node-sass和sass-loader的版本不兼容，解决方法是降级node版本到14，然后成功运行项目。

1. 安装uview-ui

npm install uview-ui -S

2. 创建vue.config.js

填写如下代码

module.exports = {
    transpileDependencies: ['uview-ui']
}

3. 配置main.js

在这里插入图片描述

//uview
import uView from "uview-ui"
Vue.use(uView)

4. App.vue中引入样式

在这里插入图片描述

 /* uni.scss */ 
 @import 'uview-ui/theme.scss';

5.配置page.json

在这里插入图片描述

"easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  },

6. 以上操作配置完成后，运行项目会发现报错，因为没有安装node-sass、sass-loader

这两个插件版本不能太高，太高不兼容
建议安装：
“node-sass”: “^4.14.1”,
“sass-loader”: “^10.1.1”,

7. 安装 node-sass@4.14.1报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\A5\AppData\Roaming\npm-cache\_logs\2021-04-02T03_16_26_869Z-debug.log