手把手教你封裝Vue組件

yanwei 發布于2019-08-22 18:15 / 654人閱讀

摘要：為了能在上更簡便地使用這個炫酷的特效，在原項目作者的提醒下，花了幾小時直接將封裝成了組件。

為了能在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

GPU云服務器云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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