手把手教你封装Vue组件

yanwei 发布于2019-08-22 18:15 / 548人阅读

摘要：为了能在上更简便地使用这个炫酷的特效，在原项目作者的提醒下，花了几小时直接将封装成了组件。

为了能在Vue上更简便地使用canvas-nest.js这个炫酷的特效，在原项目作者的提醒下，花了几小时直接将canvas-nest封装成了vue-canvas-nest组件。

初始化

# init
vue init webpack-simple vue-canvas-nest
# install dependencies
cd vue-canvas-nest && npm install

安装原项目依赖

npm install canvas-nest.js

编写组件

仔细阅读一下原项目的README，发现它只有一个API，并且作者已经说明了如何使用，只需传入需要渲染的元素和canvas-nest配置:

// There is only one API, use it like:

import CanvasNest from "canvas-nest.js";

const config = {
  color: "255,0,0",
  count: 88,
};

// render nest on element with config.
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

将原来的src文件夹重命名为example以便后期当示例和调试使用。

新建src文件夹，并在src文件夹下建立文件vueCanvasNest.vue，代码如下：

同时新建一个叫index.js导出组件

import vueCanvasNest from "./vueCanvasNest.vue"

export default vueCanvasNest

示例测试

在example文件夹下的App.vue文件里加入组件
javascript标签中代码：

import vueCanvasNest from "../"
export default {
  name: "app",
  components: { vueCanvasNest },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      config: {
        color: "0,0,255",
        count: 200,
      }
    }
  }
}

template标签中加入一行：

更改webpack.config.js

entry改为 ./src/index.js

module.exports = {
    entry: "./src/index.js",
    ...
}

开发环境下entry改为 ./example/main.js

if (process.env.NODE_ENV === "production") {
  ...
} else {
  module.exports.entry = "./example/main.js"
}

运行

npm run dev

此时就能看到炫酷的canvas-nest效果了

发布组件到npmjs

# npm初始化
npm init 

# 按照提示完成package.json后
npm publish

项目完整地址：vue-canvas-nest

云服务器海外云主机手把手教你做图像识别手把手教你阿里云服务器搭建商城 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95669.html

手把手教你用Vue.js封装Form组件

摘要：到此，和组件的代码如下在组件中设置了数组来保存组件中的表单实例，方便接下来获取表单实例来判断各个表单的校验情况并在生命周期中就绑定两个监听事件和用于添加和移除表单实例。前言：在日常使用vue开发WEB项目中，经常会有提交表单的需求。我们可以使用 iview 或者 element 等组件库来完成相关需求；但我们往往忽略了其中的实现逻辑，如果想深入了解其中的实现细节，本文章从0到1，手...

gitmilk 2019-08-23 14:25 评论0 收藏0
手把手教你用jsx封装Vue中的复杂组件（网易云音乐实战项目需求）

摘要：终极解决方案所以我们要统一环境，直接使用渲染我们的组件，文档可以参照音乐标题歌手专辑时长省去一些细节注意需要放在中，的透传也不要忘了，这样我们在外部想使用的一些属性和事件才比较方便。背景介绍最近在做vue高仿网易云音乐的项目，在做的过程中发现音乐表格这个组件会被非常多的地方复用，而且需求比较复杂的和灵活。预览地址源码地址图片预览歌单详情 showImg(https://se...

HitenDev 2019-08-26 10:28 评论0 收藏0
手把手发布一个npm包及相关注意事项

摘要：前言这里是发布包的具体步骤，手把手教会，相关原理在其他文章下面有原理好文章指路分钟教你快速开发一个插件并发布手把手教你封装一个发布之前，需要注册一个账号这里注册具体步骤新建项目如需安装代码下面新建一个文件夹。前言这里是发布npm包的具体步骤，手把手教会，相关原理在其他文章下面有原理好文章指路10分钟教你快速开发一个vue插件并发布npm 手把手教你封装一个 vue componen...

ZoomQuiet 2019-08-23 12:36 评论0 收藏0
手把手教你写 Vue UI 组件库@vue2.0

摘要：手把手教你写组件库最近在研究的实现，发现网上很少有关于插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。手把手教你写 Vue UI 组件库最近在研究 muse-ui 的实现，发现网上很少有关于 vue 插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。笔者结合官方文档，与自己的摸索总结，以最简单的 FlexBox 组件为例子，带大家入门 v...

Keagan 2019-08-20 17:02 评论0 收藏0