vue组件封装 集成到npm官网

最新推荐文章于 2023-02-01 16:21:33 发布
最新推荐文章于 2023-02-01 16:21:33 发布
阅读量145 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38083836/article/details/114285784
版权

vue组件封装 集成到npm官网：

分享一下组将封装好久之前,面试的时候 被人家问当时一下子懵逼,后来学习了 果然面试时最快捷有效提升的方法之一
废话不多说 上干货
1 写组件就不多说了
2 组件管理文件夹下添加index.js 文件 里面写代码
按照图中 写就行了 注释的很清楚了
在这里插入图片描述
3 在package.json中配置信息
Name 组件名称 不能重复 否则上传失败
Version 版本号
Description 描述
License 模式 就那么写就行
Private 设置成false 变成了公用的
Main 入口文件
在这里插入图片描述4 在main.js里面 引入组件库
在这里插入图片描述
理解成 这是一个组件库 全局引入

5 在终端 npm run lib 将项目打包

6 npm login 登录 npm 输入 用户名 密码 还有 邮箱
在这里插入图片描述
7 在npm publish 上传到npm上面 注意package.json 里面的 name 不能重复否则传不上去
在这里插入图片描述
成功的样子 传到npm上面 需要几分钟 等待刷新

昵称以重复
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件封装
Jueyue15的博客
10-06 3554
组件是什么？ 组件是Vue中的一个重要概念，是一个可以重复使用的Vue是可以复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。组件是可复用的Vue实例， 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。组件就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，当我们需要什么样的功能，就可以去调用对应的组件。 Vue组件封装过程 ● 首先，使用Vue.extend()创建一个组件 ●
Vue3富文本编辑器组件封装
最新发布
10-25
在Vue组件中，你还可以通过`this.$refs.editorRef.value`来获取或设置编辑器的HTML内容。 总结来说，Vue3结合TinyMCE，可以方便地创建一个自定义样式的富文本编辑器组件。通过配置`skin_url`和`language_url`，我们...
vue的组件封装
weixin_55971241的博客
02-01 381
封装
vue组件封装
u013008898的博客
04-27 509
以input组件为例 MyInput: <template> <el-input v-model="content" :placeholder="placeContent" @input="onEditorChange" ></el-input> </template> <script> export default { props: { inputContent: { type: String,
vue封装第三方插件并发布到npm的方法
12-09
【Vue 封装第三方插件并发布到 npm 的方法】 在 Vue 开发中，有时我们需要使用第三方库，但它们可能并未直接支持 Vue 结构。这时，我们可以将这些第三方插件封装为 Vue 插件，使其与 Vue 生态系统无缝集成。本教程...
vueUeditor:vue 封装ueditor为组件
04-28
Vue 可以通过 npm 或 yarn 安装，而 UEditor 需要从其官方网站下载或使用 npm 安装。Vue Ueditor 组件通常会提供一个简单的安装方法，如通过 npm 或者在项目中引入 JS 和 CSS 文件。 安装完成后，需要在 Vue 组件中...
vue对接海康播放器插件组件
09-07
这可能涉及到使用npm或yarn来下载相关的包，例如`hkPlayer`，这个文件名很可能对应的就是海康播放器的Vue组件库。安装命令可能是这样的： ```bash npm install --save hkPlayer # 或者 yarn add hkPlayer ``` 接...
Vue实现Layui的集成方法步骤
10-15
总之，Vue集成Layui主要涉及获取Layui资源、调整项目结构、引入样式和脚本、处理eslint配置以及在Vue组件中测试集成。在实际使用中，需要权衡Layui与Vue的结合方式，以减少可能出现的兼容性问题。
vue选项卡封装组件
10-10
根据vue实战，练习封装选项卡组件，代码里面有清晰的注释，不了解密我
vue的组件
weixin_35969228的博客
05-04 173
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 一.自定义局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
vue 组件封装
Poo__Chai的博客
08-27 467
把我们所需要的功能写在一个组件里面     比如 /*popout*/ 1：在components里面创建文件夹popout 以及index.js和popout,vue 2:在index,js里面去导出popout.vue import Popout from "./popout.vue"; export default Popout; 3:在popout里面去写我们所需要的功能 4：...
Vue 组件封装
Huang_DW的博客
09-17 499
你在项目中是如何封装组件的？ 我用vue开发的所有项目，都是采用组件化的思想开发的。 一般我在搭建项目的时候，会创建一个views目录和一个common目录和一个components目录，views目录中放页面级的组件，common目录中放公共组件（如：head（公共头组件），foot（公共底部组件）等），components目录中放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)） 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立
vue组件的封装
abei0518的博客
06-16 1326
第一步：封装一个自动全局注册组件的逻辑 思路：定义三种组件类型，根据文件后缀去判断是那种类型，该如何注册 // 获取components目录下所有index文件 const files = require.context( '../components', // 获取这个目录下所有文件 true, // 是否遍历子目录 /^\.\/(\w*\/)+index\.(vue|js)$/ ) export default { install(Vue) { files.keys().for
【Vue】 组件封装
热门推荐
小数点儿_
09-09 1万+
组件封装。父子组件间的数据传递。父组件通过 prop 将数据传递给子组件，子组件通过 emit 事件将子组件数据传递给父组件，子组件不能直接修改 prop 中传给父组件的值。子组件不能直接修改 prop 中的值。父组件通过 prop 把改变的值传到子组件中
vue 封装组件
sinat_41541913的博客
02-03 503
1、创建组件文件夹包含 .vue文件和对应的.js文件 如图： 2、完成组件模板 <!-- 这是一个公共组件 --> <template> <div>这是一个公共组件内容</div> </template> <script> export default { name:"List", data () { return { }; }, methods: {} } </script>
简单的vue组件封装
weixin_44046781的博客
08-20 193
简单的vue组件封装 整个项目中都会用到这个样式的标题 components目录下新建xxx.vue文件 代码 <template> <div class="divBg"> {{title}} <p style="float:right;color:#1C69D4;margin-right:30px; cursor: pointer;" @click="editor"> <Icon size="16" :type="icon" /&
vue element 弹窗组件封装
06-28
Vue Element弹窗组件封装可以按照以下步骤进行： 1. 安装Vue和Element UI库，确保在项目中正确引入。 2. 创建一个弹窗组件（例如：`MyDialog.vue`），并在组件中引入Element UI的弹窗组件。 3. 在弹窗组件中定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值