npm创建的uniapp微信小程序使用uview组件库下载及使用步骤

WallingDown

已于 2022-01-24 10:58:23 修改

阅读量2.9k

点赞数

分类专栏：微信小程序文章标签： vue.js npm 前端框架小程序

于 2022-01-24 10:52:53 首次发布

本文链接：https://blog.csdn.net/weixin_43994760/article/details/122662726

版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

npm创建的uni-app微信小程序使用u-view(UI)组件库下载及使用步骤（小白可参考）

1、uview的官方地址：https://v1.uviewui.com/（请注意版本号！最新版在官网中切换即可跳转）
2、uniapp官方文档地址(在此查看使用vue-cli命令行创建项目)：https://uniapp.dcloud.io/quickstart-cli

使用步骤(使用)官网已经提到，小白可看如下步骤：

1、使用【npm命令】下载依赖包，依次安装：
	npm i node-sass -D // 安装node-sass
	npm i sass-loader -D // 安装sass-loader
	npm install uview-ui@1.8.4 // // 安装u-view1.8.4版本
2、【main.js文件】
	import uView from "uview-ui";
	Vue.use(uView);
3、【App.vue文件】 注意！！在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
	<style lang="scss">
   	 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    	@import "uview-ui/index.scss";
	</style>
4、【uni.scss】在项目根目录的uni.scss中引入此主题文件。
	//  引入uview主题样式表
	@import 'uview-ui/theme.scss';
5、【pages.json】 配置easycom组件模式
	{
    	"easycom": {
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     	},
   		 "pages": [
       		........	
    	]
	}