ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

uniapp中使用uView-plus踩坑记录

2026/9/26 2:27:05 拓冰建站 浏览量
uniapp中使用uView-plus踩坑记录

​​​1.使用插件市场安装点击到插件市场

零云®uview-plus3.0重磅发布,全面的Vue3鸿蒙移动组件库。 - DCloud 插件市场
在这里插入图片描述
点击选择项目直接导入就可以,下载完成后会在uni_modules中,这个.gitignore中不可忽略

​在这里插入图片描述
使用在main.js里引入

import uviewPlus from '@/uni_modules/uview-plus'const app = createSSRApp(App);
app.use(uviewPlus);

uni.scss

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

pages.json

"easycom": {"autoscan": true,"custom": {"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"}},

2## npm安装

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

下载的文件会在node_modules里
使用在main.js里引入

import uviewPlus from 'uview-plus'const app = createSSRApp(App);
app.use(uviewPlus);

pages.json

"easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},

uni.scss

@import 'uview-plus/theme.scss';