vue.js和uniapp导入自定义组件以及使用

最新推荐文章于 2024-06-29 09:29:29 发布
最新推荐文章于 2024-06-29 09:29:29 发布
阅读量8.8k 收藏 4
点赞数 7
文章标签： vue.js 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zf118/article/details/108574548
版权

传统vue导入：

1. 导入一个vue组件：
在这里插入图片描述
2. 全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理：
在这里插入图片描述

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精髓为一步，只需组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用：
在这里插入图片描述

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。
在这里插入图片描述
下为简单导入效果
在这里插入图片描述
在这里插入图片描述

走在风浪中
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
一、创建uni-app + Vue3项目并配置自动导入
weixin_39915504的博客
07-17 1万+
在不使用自动导入的情况下，我们每使用到一个vue或者uniapp的方法的时候，就需要import一下，当配置了自动导入后就不需要import了，可以极大的提高开发效率！
uniapp editor富文本 quill.min.js image-resize.min.js
08-18
总的来说，"uniapp editor富文本 quill.min.js image-resize.min.js"涉及到的知识点主要包括uniapp框架的使用、Quill富文本编辑器的集成与定制、JavaScript图像处理以及富文本数据的管理和交互。这些技术的结合，...
vue使用-uniapp使用
da297368860的博客
05-11 2105
1、style拼接 <view class="cu-avatar round lg" :style="'background-image:url('+item.user.userAvatar+')'"></view> 2、style中使用三元运算符 <view class="cu-avatar round lg" :style="'background-image:url('+(item.userIdAnonymity==0?item.user.userAvata
vue3+ts的uniapp项目中使用unplugin-vue-components自动导入组件
weixin_70243424的博客
06-29 328
【代码】vue3+ts的uniapp项目中使用unplugin-vue-components自动导入组件。
Vue-uniapp笔记
weixin_49562132的博客
05-09 4141
一、Pages生命周期 uni-app 支持如下页面生命周期函数： 函数名 说明 平台差异说明 最低版本 onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad 百度小程序 3.1.0+ onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例 onShow 监听页面显示。页面每次出现
vue中全局、局部引入js文件【vue】、【uniapp】
wwppp987的博客
02-18 4020
vue和uniapp中引入js文件 一、全局引入 1、main.js当中引入 // 引入个人定义js文件 import * as tools from './common/util/faser/useage.js' // 自定义tools Vue.prototype.$tools=tools; 2、在vue文件中引用： {{$tools.getDateTime()}} this.$tools.getDateTime() 3、工具类文件必须遵循格式：export function useage.js中
uniapp基于vue自定义组件
zhangxueyou2223的博客
05-06 1963
五一假期结束了，我是痴心阿文，你们的学友哥，今天给大家分享uniapp基于vue自定义组件！
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
现在，我们可以在uniAPP的组件中使用Dplayer.js和hls.js来播放m3u8视频。这里我们以`videoPlay.html`为例，创建一个名为`VideoPlay.vue`的组件： ```html :options="playerOptions" /> export default ...
Uniapp swiper 滚动图组件
09-10
【标题】"Uniapp swiper 滚动图组件"是一个基于Vue.js开发的全端兼容的前端组件，专为在不同平台（如iOS、Android、H5等）上实现滑动轮播效果而设计。它提供了丰富的功能和高度的自定义性，使得开发者能够轻松地在...
>Vue组件化，封装SVG图标 支持uniapp等vue版本 # 前言 # 设计思路 **创建SVG组件：** 首先创建一
最新发布
07-18
### Vue组件化，封装SVG图标 支持uniapp等vue版本 #### 前言与设计思路 在现代Web开发中，图标是非常重要的视觉元素之一。传统的图标使用方法包括使用图像文件（如PNG或JPEG）或者字体图标。然而，这些方法都有...
city.js配合专栏uniapp有手系列,轻松解决地区选择
07-27
标题中的"city.js配合专栏uniapp有手系列,轻松解决地区选择"暗示了这是一个关于使用JavaScript库`city.js`与uni-app框架结合实现地区选择功能的教程。uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次...
html初始化代码__React-Typescript项目初始化
weixin_34861332的博客
12-27 260
第一篇：初始化React-TS项目你的先安装react-appnpm install -g create-react-app然后再使用这个命令创建ts的开发环境，React​typescript.bootcss.com<!-- 此种方法已经废弃 create-react-app react-for-typescript --scripts-version=react-scripts-ts -...
vue整合uniapp_uniapp教程|vue h5转换uni-app指南（vue转uni、h5转uni）
weixin_29382705的博客
12-23 586
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：你的web站是适合手机屏幕的；你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理1.把之前的vue web项目的前端代码copy到新项目下2.如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节...
uniapp npm引入uView组件库
qq_62923382的博客
02-23 493
如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可。在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。uView依赖SCSS，您必须要安装此插件，否则无法正常运行。在项目src目录的uni.scss中引入此文件。
uniapp实现自动导入组件
drakseason的博客
12-17 1310
【代码】uniapp实现自动导入组件。
uniapp中怎么使用easycom 自定义组件
热门推荐
weixin_43743148的博客
05-01 1万+
一、全局注册 uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 Vue.component 的第一个参数必须是静态的字符串。 nvue 页面暂不支持全局组件。 二、局部注册 局部注册之前，在需要引用该组件的页面，导入你想使用的组件。页面引入组件方式分两种： 第一种：传统vue规范 在需要引入自定义组件的 页面中，通过 import 方式引入组件 （导入），在 components 选项中注册你想要使用的组件（引用），在页面中使用自定义组件名称标签
vue-cli创建的unapp 项目 引入和使用uview框架 支持sass
业余前端的职业经历
02-22 1201
使用hbuilderX创建的项目 确实比较方便 但是确实限制了很多东西。我想自定义一些打包或者环境 对我来说有点不舒服 所以我还是采用了 cli的方式创建了 uni项目 因为项目中引入了 uview 这个是需要 sass的支持呢 ,但是吧 cli创建的 需要你手动安装下 sass支持环境 安装 npm i sass-loader node-sass --save **注意如果你使用的是 vue2的话 那么最新的webpack版本是4.*, 但是我们npm默认不指认版本的话 安装的就是最新的webpac
使用vue2开发uni-app项目流程
qq_41282779的博客
08-16 4191
记录使用vue2开发uni-app项目点的前期工作，包括环境工具的准备等。提示：以下是本篇文章正文内容，下面案例可供参考未完待续。
uniapp vue自定义组件
09-17
在Uniapp Vue中，创建自定义组件的步骤如下： 1. 在components文件夹中创建一个新的.vue文件，作为组件的界面和逻辑 ```html <template> <view> <!-- 组件的内容 --> </view> </template> <script> export default { name: "组件名称", // 组件的名称 props: { // 属性定义 属性名称: { type: String, // 属性类型 default: "默认值" // 属性默认值 }, // 其他属性定义 }, created() { // 组件的生命周期钩子函数 }, computed: { // 计算属性 }, methods: { // 组件的方法 组件函数名称(obj) { // 方法内容 }, // 其他方法 } } </script> <style> /* 组件的样式 */ </style> ``` 2. 在需要使用自定义组件的页面中，引入并注册自定义组件 ```html <template> <view> <!-- 其他页面内容 --> <组件名称></组件名称> <!-- 使用自定义组件 --> </view> </template> <script> import 组件名称 from "@/components/组件名称/组件名称.vue"; // 引入自定义组件 export default { data() { return { // 页面数据 } }, methods: { // 页面方法 }, components: { 组件名称 // 注册自定义组件 } } </script> <style> /* 页面样式 */ </style> ``` 通过上述步骤，您可以在Uniapp Vue中创建和使用自定义组件。您可以在组件中定义属性、计算属性和方法，并在需要使用组件的页面中进行引入和注册，然后在页面中使用自定义组件的标签即可。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值