uniapp 引入 uView

第一步

  • 创建好uniapp项目,如果根目录没有package.json,使用:
    npm init -y

第二步 下载Uview ui组件库

    <!-- 下载 -->
    npm install uview-ui@2.0.31
    
    <!-- 更新 -->
    npm update uview-ui

第三步

如果是 HBuilder X 创建项目 是内置sass的,所以不用下载 ,这一步跳过
  • vue-cli 创建项目则使用 :
    // 安装sass
    npm i sass -D
    
    // 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
    npm i sass-loader@10 -D

第四步

  • 在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在 import Vue 之后。
    // main.js
    import uView from "uview-ui";
    Vue.use(uView);

第五步

  • 在项目根目录的uni.scss中引入此文件。
    /* uni.scss */
    @import 'uview-ui/theme.scss';

第六步 引入uView基础样式

  • 在App.vue中的 style标签 首行的位置引入,注意给style标签加入lang="scss"属性
    <style lang="scss">
        /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
        @import "uview-ui/index.scss";
    </style>

第七步 配置easycom组件模式

  • 此配置需要在项目根目录的pages.json中进行
    // pages.json
    {
        "easycom": {
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        },
        
        // 此为本身已有的内容
        "pages": [
            // ......
        ]
    }

第八步 从新打开 HBuilder X 使用以下代码测试是否成功

<template>
    <u-swiper
            :list="list3"
            indicator
            indicatorMode="line"
            circular
    ></u-swiper>
</template>
<script>
    export default {
        data() {
            return {
                list3: [
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
            }
        }
    }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一步 创建好uniapp项目,如果根目录没有package.json,使用: 第二步 下载Uview ui组件库...
    不想熬夜a阅读 2,174评论 0 2
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,007评论 1 4
  • 微信小程序开发指引 前言 本文档我们主要关注微信小程序的开发使用。微信小程序使用微信开发者工具开发,使用其专有语言...
    tikeyc阅读 36,968评论 0 19
  • 前言 在过去的十年时间里,我们的网页变得更加动态化和强大了。多亏有JavaScript,我们已经把很多传统的服务端...
    Ping开源阅读 2,134评论 0 11
  • uView框架 uView2.0是继1.0以来的一次重大更新,2.0已全面兼容nvue,为了这个最初的梦想,我们曾...
    前端阿力阅读 1,392评论 0 2