首页 > 其他分享 >在uni-app中引入uView

在uni-app中引入uView

时间:2022-11-07 17:31:55浏览次数:66  
标签:scss uview app uView ui 引入 uni


在uni-app中引入uView的方式有两种:

通过npm下载

// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y

npm install uview-ui

// 更新
// npm update uview-ui

配置步骤

1.引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
// 引入全局 uView 框架
import uView from 'uview-ui';
Vue.use(uView);

2.在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss引入view主题样式 */
@import 'uview-ui/theme.scss';

3.引入uView基础样式

注意:在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

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

4.配置easycom组件模式
在pages.json配置,uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启Hbuilder X或者重新编译项目才能正常使用uView的功能。请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

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

通过插件市场安装

如果使用Hbuilder X进行开发,就可以在uni-app​​插件市场​​通过uni_modules的形式进行安装。

1.点击导入

在uni-app中引入uView_vue.js


2.打开hbuilderX

在uni-app中引入uView_javascript_02


3.选择项目

在uni-app中引入uView_npm_03


4.开始下载

在uni-app中引入uView_vue.js_04


5.确保安装了scss/sass编译器

在工具中找到“插件安装”

在uni-app中引入uView_javascript_05

在uni-app中引入uView_根目录_06

配置步骤

1.引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

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

2.在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

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

3.引入uView基础样式

注意:在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

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

4.配置easycom组件模式
在pages.json配置,uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启Hbuilder X或者重新编译项目才能正常使用uView的功能。请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。uni_modules方式引入的uview可以不配置。

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


标签:scss,uview,app,uView,ui,引入,uni
From: https://blog.51cto.com/u_15867142/5830161

相关文章

  • uni-app框架开发app中出现的问题(持续更新中...)
    uni-app框架开发app中出现的问题​​uview中图标不显示​​​​无法使用彩色iconfont​​​​滚动回顶部​​​​监听横屏和录屏的变化​​​​ucharts双指缩放24小时曲线​......
  • 03-APP的启动过程
    声明:原创文章,转载请备注来源: https://shuwoom.com/?p=142备注:本文的Android源码版版本都是基于Android4.4.3为了更好地理解APK加壳加固原理,我们需要对APP的启动流程进行......
  • PowerApps Canvas App Vs Model-driven App Vs Portal App
    TheCanvasAppinPowerAppsCanvas isoneofthemaintypesofapplicationsthatyoucancreateinPowerApps.Itgivesyouablankcanvasandallowsyoutod......
  • call()、apply()、bind()的作用和区别
    call、apply和bind都是用来修改this指向的,这三个方法都是函数对象的方法bind可自行测试由上图发现,当函数调用call方法和apply方法时,是和正常调用函数一样的,当不传递参数,......
  • APP开发中如何减小apk安装包大小
    一些减少应用程序大小的解决方案:1.压缩PNG和JPG每当您必须在应用程序内使用图像(例如演练屏幕)并且您不想从外部主机调用图像时,您应该压缩您的PNG和JPG,因为高质量的图像......
  • 智能烤箱APP开发应具备的功能有哪些
    1.智能连接智能烤箱APP平台会给用户提供智能连接功能,用户可通过蓝牙或者wifi直接进行连接,连接后用户即可直接使用智能烤箱APP进行操作。2.烘焙配方智能烤箱APP平台会给......
  • 处理uniapp激励广告
    使用uniapp查看广告getAdsItem(item){//看广告//console.log(item.adTitle,item)if(app.getIsVisitor()){......
  • uniapp自定义组件的使用--记录
    在pages.json同级目录下创建目录和文件:components:  videoComp:VideoPlaySelf.vueVideoPlaySelf.vue内容<template><videoclass="video"id="myVideo"......
  • uniapp引入微信小程序自定义视频组件--记录
    官方文档:https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html在pages.json同级目录下创建目录和文件:wxcomponents:   my-video-play:index.js ......
  • uniapp小程序微信支付功能
    小程序支付https://blog.csdn.net/lwx931449660/article/details/122530586 uniapp小程序微信支付功能已于2022-09-2810:38:34修改字段说明前置工作获取......