创建uni-app+uView+扩展组件项目

  1. 创建uni-app项目

创建uni-app+uView+扩展组件项目_第1张图片

2.安装uni-app扩展组件

(1)按需引入:找到需要安装的组件(如数字角标)

创建uni-app+uView+扩展组件项目_第2张图片
创建uni-app+uView+扩展组件项目_第3张图片

如果遇到导入不了的问题就重装uni_modules插件即可

导入成功的效果

创建uni-app+uView+扩展组件项目_第4张图片
创建uni-app+uView+扩展组件项目_第5张图片

(2)整个组件导入

创建uni-app+uView+扩展组件项目_第6张图片
创建uni-app+uView+扩展组件项目_第7张图片
创建uni-app+uView+扩展组件项目_第8张图片
创建uni-app+uView+扩展组件项目_第9张图片
创建uni-app+uView+扩展组件项目_第10张图片

(3)如果遇到导入不了的问题就重装uni_modules插件即可

创建uni-app+uView+扩展组件项目_第11张图片
创建uni-app+uView+扩展组件项目_第12张图片

(4)使用组件

直接在需要用到组件的地方使用无需再引入

3.安装uView

(1)安装

npm install [email protected]
//版本最好不要太新,不然没效果
// 更新
// npm update uview-ui
创建uni-app+uView+扩展组件项目_第13张图片

(2)插件引入

  1. 在uni.scss文件中引入

@import '@/uni_modules/uview-ui/theme.scss';
// 注意确保文件路径正确,uni_modules安装的时候可能是安装在node_modules
  1. 在pages.json文件中

{
    "easycom": {//匹配规则
        "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

3.在main.js中

import uView from '@/uni_modules/uview-ui'//在import Vue from 'vue'下引入uView
Vue.use(uView)

4.在App.vue文件中进行样式的全局挂载

5.使用组件

直接在需要用到组件的地方使用无需再引入

你可能感兴趣的:(uni-app,html5,前端)