uniapp引入uView

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);

  1. 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"
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容