uView官网：https://uviewui.com
1. 安装uView
npm install uview-ui
结果
2. 因为uView依赖SCSS，所以要安装scss插件，否则无法正常运行
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
-
HBuilderX工具中需要安装scss编译插件
image.png
image.png
3.配置文件
- 在main.js中引入uView
import Vue from 'vue'
import App from './App'
//引入uView
import uView from "uview-ui";
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
- 在uni.scss中引入uView的全局SCSS文件
/* 引入uViewUI的全局scss主题文件*/
@import 'uview-ui/theme.scss';
结果
- 在App.vue中引入uView样式
<style lang="scss">
/* 要写在第一行，同时给style标签加入lang="scss" */
@import "uview-ui/index.scss";
</style>
结果
注意：此时可能出现如下报错，不要慌张只要把项目重新运行一下ok了
错误
重新运行后，就正常了
- 在pages.json中配置easycom组件模式
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ ]
、、、
}
结果
4.使用组件--在vue文件中使用（这里我用了按钮组件）
<view >
<u-button type="primary" text="确定"></u-button>
<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
</view>
image.png
结果
