【第一篇】使用Uview2.0 ui 库

795 阅读1分钟

uView 2.0 是一款功能强大的UI框架,专为UniApp开发设计,提供了丰富的组件和工具,帮助开发者提升开发效率和UI设计水平。本文将详细介绍如何通过插件市场安装uView 2.0,并在UniApp项目中进行配置和使用。

【第一篇】使用 uView

1、在插件市场下载插件

下载地址:ext.dcloud.net.cn/plugin?id=1…

image.png
 2、 安装uView插件

点击插件右侧的 下载插件并导入 按钮,HBuilderX会自动下载并安装uView UI框架到你的项目中。 导入之后在目录中的位置如下:

image.png

3、在main.js中引入并使用uView的JS库,注意放在import Vue之后

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

image.png

4、在uni.scss引入uView的全局SCSS主题文件

@import '@/uni_modules/uview-ui/theme.scss';

image.png

5、在App.vue引入uView基础样式

<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

image.png

6、在pages.json中配置easycom组件模式

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

image.png

7、在项目中显示成功

image.png