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 */

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

你可能感兴趣的:(uniapp引入uView)