uni-app 使用uview

1、下载HBuilderX：

官方IDE下载地址https://www.dcloud.io/hbuilderx.html

2、新建项目 ：  文件 => 新建 => 项目

 

   

3、设置项目名称、目录、选择默认模板

 

4、下载uView UI 

官网地址：uView UI 官网https://uviewui.com/components/intro.html
下载地址：uView UI下载https://ext.dcloud.net.cn/plugin?id=15935、安装scss：工具 => 插件安装 => 安装scss

 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过

npm i node-sass sass-loader -D

或

yarn add node-sass sass-loader -D

 5、配置步骤

      a、 main.js中加入以下代码：

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

      b、 在项目根目录的uni.scss中引入uView的全局SCSS主题文件

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

      c、在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性 

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

      d、项目根目录的pages.json中配置easycom组件模式

 

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

6、运行，可选择浏览器、小程序等，小程序首选微信小程序；