1、将下载好的uview-ui文件放入到uni-app项目的根据目录中
uview-ui文件下载地址(https://ext.dcloud.net.cn/plugin?id=1593
)
2、在main.js中引入
// main.js
import uView from "uview-ui";
Vue.use(uView);
-
App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
4、
uni-app不支持将SCSS变量相关的样式通过App.vue引入,为了统一的主题,以及日后的扩展, 目前一些跟颜色相关的scss变量定义在全局变量中,这些变量有独特的命名(u-开头),不会与您的类名冲突。
这些变量需要写入到项目根目录的uni.scss中才有效(这是uni-app的机制问题)
在uni.scss中引入uview的主题
@import 'uview-ui/theme.scss';
5、
在pagew.json中加入
{
//加入 easycom,这样不需要引入组件,注册组件了
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/chat/talk/talk",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"backgroundColor":"#EEEEEE"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}