uniapp2使用uView
文章描述：
uniapp项目引入uView组件
创建uniapp项目
1、新建uniapp项目
模板选择 → 默认模板
Vue版本选择2
安装sass与sass-loader
npm i sass -D安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
在package.json文件里面添加指定sass、sass-loader版本
{
"dependencies": {
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
}
}
安装uView
1、运行命令，添加uview在package.json里面
npm add uview-ui
2、配置main.js
// UI库插件uView
import uView from "uview-ui";
Vue.use(uView);
// 因为uView改回使用px为默认单位，如此配置即可改为rpx
uni.$u.config.unit = 'rpx'
3、引入uView的全局SCSS主题文件，在项目src目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
引入uView基础样式
App.vue中首行的位置引入，注意给style标签加入lang=”scss”属性
<style lang="scss">
/*每个页面公共css */
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
在package.json里面添加scss
{
"dependencies": {
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"scss":"^0.2.4",
"uview-ui": "^2.0.36"
}
}
配置easycom组件模式
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，需要重启HX或者重新编译项目才能正常使用uView的功能。
确保你的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
vue
<template>
<view>
<u-button type="primary" text="确定"></u-button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
发布时间：2023/12/13
发表评论