1- 安装
npm install uview-ui
2- 下载之后复制路径中的uview-ui
3- 粘贴到项目根路径下
4- 在main.js中引入
// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);
5- 在uni.scss中引入
/**
* 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
* 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
* uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
*/
@import 'uview-ui/theme.scss';
6- 在App.vue中引入
注意style要加上lang=scss
<style lang="scss">
@import "uview-ui/index.scss";
</style>
7- 在pages.json中 配置easycom组件模式
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
8- 测试
<template>
<view class="container">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: '待收货'
}, {
name: '待付款'
}, {
name: '待评价',
count: 5
}],
current: 0
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>
9- 重新启动项目
// 第二种,亲试有效,不知道为啥,用第一种方式引入,到微信开发者工具上面,总是报 组件找不到
使用的编辑器是Hbuilder X
1, 直接在uview官方文档内按步骤用下载的方式安装
然后是步骤,按图来
2, 先安装sass
// 安装sass
npm i sass -D
// 安装sass-loader
npm i sass-loader -D
下载好后,这边就会有uview ui的文件了。
3,这里是重点,放的位置不要放错了,官网文档上说放在import Vue之后,如果你放了是不生效的,会报错,要放在我这个位置才生效。找不到文件的报错原因也正是这边位置没放对出来的
import uView from '@/uni_modules/uview-ui';
Vue.use(uView);
@import '@/uni_modules/uview-ui/theme.scss';
@import "@/uni_modules/uview-ui/index.scss";
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
}