uview官方文档:https://www.uviewui.com/

第一步:安装node-scss

npm i node-sass -D

第二步:安装 sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错

npm i sass-loader@10 -D

第三步:安装uview-ui 组件库

npm install uview-ui

第四步:在main.js 引入uview组件库(在src目录中的main.js)-----一定要放在import Vue之后

import uView from "uview-ui";

Vue.use(uView);

第五步:在引入uView的全局 SCSS 主题文件(在src目录中uni.scss中引入)

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

第六步:引入uview基础样式(在APP.vue首行的位置引入,给style标签加入lang=‘scss’属性)

@import "uview-ui/index.scss";

第七步:配置easycom 组件模式(在src目录中的pages.json中)----确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

 (第八步:如果是vue-cli模式的项目,还需要在根目录的vue.config.js文件进行配置

// vue.config.js,如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']}

 问题总结:

npm下载报错:可以尝试cnpm下载,要确定是在项目的目录中打开的 cmd 或者 poweshell !!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐