uniapp - 搭建並引入uview

1.HBilderX
新建項目

2.新建兩個頁面

3.修改pages.josn 添加tabbar配置，tip:小程序height,fontSize不支持。分包預留好位置

{
    "pages": [
        {
            "path": "pages/Main/home",
            "style": {
                "enablePullDownRefresh": true,
                "navigationBarTitleText": "home"
            }
        },
        {
            "path": "pages/Main/charts",
            "style": {
                "enablePullDownRefresh": true
            }
        }
    ],
    "subPackages": [
        {
            "root": "pages/Main",
            "pages": []
        }
    ],
    "tabBar": {
        "color": "#111111",
        "backgroundColor": "#fff",
        "selectedColor": "#5F9EFF",
        "position": "bottom",
        "list": [
            {
                "pagePath": "pages/Main/home",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "主頁"
            },
            {
                "pagePath": "pages/Main/charts",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "副頁面"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

4.引入uview

$ npm i uview-ui

//pages.josn
"easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

//App.vue
<style lang="scss">
/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
@import 'uview-ui/index.scss';
</style>

//main.js
//引入u-view
import uView from 'uview-ui';
Vue.use(uView);

//uni.scss  第一行
@import "uview-ui/theme.scss";
@import "uview-ui/index.scss";