iis服务器助手广告
返回顶部
首页 > 资讯 > 移动开发 >uniapp使用uview-plus(vue3项目)
  • 789
分享到

uniapp使用uview-plus(vue3项目)

vue小程序 2023-09-16 12:09:34 789人浏览 独家记忆
摘要

先创建一个vue3的uniapp项目,建议选择空项目 Hbuilder X方式 下载方式配置文档 如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续

先创建一个vue3的uniapp项目,建议选择空项目

Hbuilder X方式

下载方式配置文档

如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续在uni_modules对uview-plus进行一键升级。

  • 在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可。

 下载地址:uview-plus3.0重磅发布,全面的Vue3移动组件库。 - DCloud 插件市场

确认已经安装插件sCSS插件

 

引入uview-plus主js

在项目根目录中的main.js中,引入并使用uview-plus的JS库,注意这两行要放在const app = createSSRApp(App)之后。

// main.jsimport uviewPlus from '@/uni_modules/uview-plus'// #ifdef Vue3import { createSSRApp } from 'vue'export function createApp() {  const app = createSSRApp(App)  app.use(uviewPlus)  return {    app  }}// #endif

在引入uview-plus的全局SCSS主题文件

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

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

引入uview-plus基础样式

注意!

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

#安装依赖库

npm i dayjsnpm i clipboard

 

 

来源地址:https://blog.csdn.net/qq_16182677/article/details/129935901

--结束END--

本文标题: uniapp使用uview-plus(vue3项目)

本文链接: https://www.lsjlt.com/news/409913.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • uniapp使用uview-plus(vue3项目)
    先创建一个vue3的uniapp项目,建议选择空项目 Hbuilder X方式 下载方式配置文档 如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续...
    99+
    2023-09-16
    vue 小程序
  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板
    (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板 版本信息: HBuilderX: 3.8.4Vite: 4.2.1uView-Plus: ...
    99+
    2023-09-14
    小程序 uni-app
  • uniapp使用第三方UI库uview-plus的方法
    目录前言:一、使用Album相册功能二、 picker  选择器三、input输入框 和 Textarea 文本域四、使用textarea总结前言: 开发uniapp时,有...
    99+
    2023-05-18
    uniapp使用uview-plus uniapp uview-plus uniapp使用第三方ui
  • uniapp怎么使用uview
    本文小编为大家详细介绍“uniapp怎么使用uview”,内容详细,步骤清晰,细节处理妥当,希望这篇“uniapp怎么使用uview”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。安装uview的安装方式有两种,一...
    99+
    2023-07-05
  • uniapp 小程序 使用vue3+ts运行项目
    一、详细可查看官网介绍,以下是我用vue-cli创建的vue3+ts项目 uniapp官网教程:uni-app官网 创建方式有2种 第一种:通过HBuilderX可视化界面创建 第二种:通过vue-cli命令行 二、本次使用的是vue-c...
    99+
    2023-09-15
    uni-app 小程序 前端
  • uniapp使用uview的简单案例
    简介 uview框架已经出到2.0了,从当初的1.0到2.0,一路走来,在uniapp中使用框架。确实帮助自己节省许多时间,为了以后更好的应用,记录一下使用方法和使用心得。 安装 1...
    99+
    2023-03-23
    uniapp使用uview报错 uniapp使用uview uview使用
  • 利用Vite搭建Vue3+ElementUI-Plus项目的全过程
    目录创建项目初始化项目添加依赖并运行添加路由添加依赖添加路由配置文件在main.js中添加路由添加Home页面进行测试添加ElementUI-Plus安装element-plus依赖...
    99+
    2024-04-02
  • vite+vue3+element-plus项目搭建的方法步骤
    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。 $ npm init vite-app <project-name&...
    99+
    2024-04-02
  • 怎么在uniapp项目中使用mqtt
    这篇文章将为大家详细讲解有关怎么在uniapp项目中使用mqtt,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、uniapp插件市场的参考插件  https://ext.dcloud.net.cn/pl...
    99+
    2023-06-15
  • 如何在uniapp项目中使用mqtt
    目录一、uniapp插件市场的参考插件二、具体引入过程1.安装mqtt和uuid2.页面引入mqtt并调用3.运行结果由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即...
    99+
    2024-04-02
  • vue3项目中怎么使用tinymce
    tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中...
    99+
    2023-05-19
    Vue3 tinymce
  • 如何在vue项目中使用UEditor--plus
    目录1:UEditor-plus富文本编辑器如何在vue项目中使用2.使用方法3.运行项目1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度...
    99+
    2024-04-02
  • 聊聊uniapp项目中怎么使用Axios
    Uniapp 是基于 Vue.js 的跨平台开发框架,可以同时构建 iOS、Android 和 Web 应用,而 Axios 是一款流行的基于 Promise 的 HTTP 库。虽然 Uniapp 可以使用 Vue.js 自带的 $http...
    99+
    2023-05-14
  • Vue3项目中的hooks怎么使用
    本篇内容介绍了“Vue3项目中的hooks怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!hooks 特点vue3 中的 hooks ...
    99+
    2023-07-06
  • Vue3+Element-plus项目自动导入报错怎么解决
    本篇内容介绍了“Vue3+Element-plus项目自动导入报错怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言在创建 Vue3...
    99+
    2023-07-02
  • vue3项目中使用tinymce的方法
    目录1、安装相关依赖2、下载中文包3. 引入皮肤和汉化包4. 封装组件:在src/components下新建TEditor.vue,并写入以下代码5. 注册及使用组件tinymce是...
    99+
    2023-05-17
    vue3使用tinymce vue使用tinymce
  • Vite创建Vue3项目及Vue3使用jsx的方法
    使用 yarn:yarn create @vitejs/app使用 npm:npm init @vitejs/app1. 输入项目名称这里输入我们的项目名称:vite-vue32. 选择框架这里选择我们需要集成的框架:vuevanilla:...
    99+
    2023-05-22
    Vue3 vite jsx
  • Vue3+Element-plus项目自动导入报错如何解决
    这篇“Vue3+Element-plus项目自动导入报错如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3+El...
    99+
    2023-07-06
  • Vue3项目中的hooks的使用教程
    目录hooks 特点hooks 基本使用今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vu...
    99+
    2022-11-13
    Vue3 hooks使用 Vue3 hooks
  • vue3如何使用element-plus的dialog
    目录如何优雅的基于 element-plus,封装一个梦中情 dialog优点想法效果图基于 el-dialog 进行初步封装在app.vue中挂载使用创建一个弹窗组件在列表页面唤醒...
    99+
    2023-05-17
    vue3使用element-plus的dialog vue element-plus dialog
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作