uniapp使用uview-plus(vue3项目)

这篇具有很好参考价值的文章主要介绍了uniapp使用uview-plus(vue3项目)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

uniapp使用uview-plus(vue3项目)

Hbuilder X方式

下载方式配置文档

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

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

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

uniapp使用uview-plus(vue3项目)

确认已经安装插件scss插件

uniapp使用uview-plus(vue3项目)

 文章来源地址https://www.toymoban.com/news/detail-466854.html

引入uview-plus主JS库

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

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

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

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

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

引入uview-plus基础样式

注意!

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

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

#安装依赖库

npm i dayjs
npm i clipboard

 

 

到了这里,关于uniapp使用uview-plus(vue3项目)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序/vue3/uview-plus form兜底校验

    1. :model=‘form’ 若把form的值设置为 空对象  const form = reactive({  }); 控制台报错    2. 不能把 prop 写为name 否则没有任何效果

    2024年02月07日
    浏览(56)
  • uniapp:uview-plus的一些记录

    customStyle 并不是所有的组件都有customStyle属性来设置自定义属性,有的还是需要通过::v-deep来修改内置样式 form表单 labelStyle 需要的是一个对象 dateTimePicker选择器设置默认值 根据文档设置defaultIndex未生效,通过网上查阅文章得到方法,通过设置dateTimePicker的innerValue属性来设置

    2024年04月11日
    浏览(36)
  • uniapp中使用pinia (针对于uniapp创建vue3项目,uniapp创建vue2项目此方法不可用)

    如果新建项目,先初始化一下 名字自己定我的是pinia-store,在目录下新建index.js和login.js,代码如下 index.js 这是需要被main.js引用的 如同与vue3项目中index.ts中引入的pinia 再建一个存储状态的文件(login.js) 4 main.js中的修改 在vue组件中就可以操作pinia中存储的状态的和一系列操作了

    2024年02月11日
    浏览(74)
  • 如何使用Vite创建Vue3的uniapp项目

    Vue3/Vite 版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7 以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node 路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置-运行配

    2024年02月09日
    浏览(130)
  • 使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

    uni-create-view :用于快速创建 uni-app 页面 uni-helper uni-app :代码提示 uniapp 小程序扩展 :鼠标悬停查文档 1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types. 2.添加vueCompilerOptions选项 ①在VS Code中找到设置 ②在设置中搜索文件关联 ③添加这两个文件名,值为

    2024年04月27日
    浏览(71)
  • vue3+vite+element-plus创建项目,修改主题色

    根据官方文档安装依赖 vite.config.js配置 新建一个文修改全局样式的文件 在src下新建styles/element/index.scss文件,内容如下: @forward \\\'element-plus/theme-chalk/src/common/var.scss\\\' with (     $colors: (         \\\'primary\\\': (             //主色             \\\'base\\\':green         )         //修改其他

    2024年02月10日
    浏览(55)
  • vue3项目创建(vite3+ts+elementui-plus)

    目的:vue3+vite+ts 安装依赖,安装vite的工具 Vite下一代的前端工具链为开发提供极速响应v4.3 创建工程 –template vue-ts 后面的是配置模板,有很多,也有react,官网有介绍 启动工程 安装路由 配置vite-env.d.ts 为了让ts识别.vue文件 安装element-plus 注意vue3用的是element-plus别装错版本了

    2024年02月16日
    浏览(55)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我创建的投票列表实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月21日
    浏览(57)
  • Vue3+TS+Vite创建项目,并导入Element-plus和Sass

    1.桌面新建一个文件夹Vue3-app 打开编辑器导入文件夹,编辑器打开终端输入或者命令行工具cd到项目目录下输入 npm init vue@latest 回车运行 这里我选择了TS+Vite来开发,并选择安装路由 2.cd到 vue-project目录下 输入 npm install 回车运行 3.安装完成后 输入 npm run dev 回车运行 浏览器打开

    2024年02月16日
    浏览(59)
  • 详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

    前言 在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”,但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。 Vite 和 Webpack 都是现代化的前端构建工

    2024年01月18日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包