国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手把手教你封裝Vue組件

yanwei / 663人閱讀

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

為了能在Vue上更簡便地使用canvas-nest.js這個(gè)炫酷的特效，在原項(xiàng)目作者的提醒下，花了幾小時(shí)直接將canvas-nest封裝成了vue-canvas-nest組件。

初始化 
# init
vue init webpack-simple vue-canvas-nest
# install dependencies
cd vue-canvas-nest && npm install
安裝原項(xiàng)目依賴 
npm install canvas-nest.js
編寫組件

仔細(xì)閱讀一下原項(xiàng)目的README，發(fā)現(xiàn)它只有一個(gè)API，并且作者已經(jīng)說明了如何使用，只需傳入需要渲染的元素和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以便后期當(dāng)示例和調(diào)試使用。

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

同時(shí)新建一個(gè)叫index.js導(dǎo)出組件

import vueCanvasNest from "./vueCanvasNest.vue"

export default vueCanvasNest
示例測試

在example文件夾下的App.vue文件里加入組件
javascript標(biāo)簽中代碼：

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標(biāo)簽中加入一行：
更改webpack.config.js

entry改為 ./src/index.js

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

開發(fā)環(huán)境下entry改為 ./example/main.js

if (process.env.NODE_ENV === "production") {
  ...
} else {
  module.exports.entry = "./example/main.js"
}
運(yùn)行 
npm run dev

此時(shí)就能看到炫酷的canvas-nest效果了

發(fā)布組件到npmjs 
# npm初始化
npm init 

# 按照提示完成package.json后
npm publish
項(xiàng)目完整地址：vue-canvas-nest

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95669.html

相關(guān)文章

  • 手把手教你用Vue.js封裝Form組件

    摘要：到此，和組件的代碼如下在組件中設(shè)置了數(shù)組來保存組件中的表單實(shí)例，方便接下來獲取表單實(shí)例來判斷各個(gè)表單的校驗(yàn)情況并在生命周期中就綁定兩個(gè)監(jiān)聽事件和用于添加和移除表單實(shí)例。 前言： 在日常使用vue開發(fā)WEB項(xiàng)目中，經(jīng)常會(huì)有提交表單的需求。我們可以使用 iview 或者 element 等組件庫來完成相關(guān)需求；但我們往往忽略了其中的實(shí)現(xiàn)邏輯，如果想深入了解其中的實(shí)現(xiàn)細(xì)節(jié)，本文章從0到1，手...

    gitmilk 評(píng)論0 收藏0

  • 手把手教你用jsx封裝Vue中的復(fù)雜組件（網(wǎng)易云音樂實(shí)戰(zhàn)項(xiàng)目需求）

    摘要：終極解決方案所以我們要統(tǒng)一環(huán)境，直接使用渲染我們的組件，文檔可以參照音樂標(biāo)題歌手專輯時(shí)長省去一些細(xì)節(jié)注意需要放在中，的透傳也不要忘了，這樣我們?cè)谕獠肯胧褂玫囊恍傩院褪录疟容^方便。 背景介紹 最近在做vue高仿網(wǎng)易云音樂的項(xiàng)目，在做的過程中發(fā)現(xiàn)音樂表格這個(gè)組件會(huì)被非常多的地方復(fù)用，而且需求比較復(fù)雜的和靈活。 預(yù)覽地址 源碼地址 圖片預(yù)覽 歌單詳情 showImg(https://se...

    HitenDev 評(píng)論0 收藏0

  • 手把手發(fā)布一個(gè)npm包及相關(guān)注意事項(xiàng)

    摘要：前言這里是發(fā)布包的具體步驟，手把手教會(huì)，相關(guān)原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個(gè)插件并發(fā)布手把手教你封裝一個(gè)發(fā)布之前，需要注冊(cè)一個(gè)賬號(hào)這里注冊(cè)具體步驟新建項(xiàng)目如需安裝代碼下面新建一個(gè)文件夾。 前言 這里是發(fā)布npm包的具體步驟，手把手教會(huì)，相關(guān)原理在其他文章下面有原理好文章指路10分鐘教你快速開發(fā)一個(gè)vue插件并發(fā)布npm 手把手教你封裝一個(gè) vue componen...

    ZoomQuiet 評(píng)論0 收藏0

  • 手把手教你寫 Vue UI 組件庫@vue2.0

    摘要：手把手教你寫組件庫最近在研究的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過，對(duì)于新手來說并不算友好。 手把手教你寫 Vue UI 組件庫 最近在研究 muse-ui 的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于 vue 插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過，對(duì)于新手來說并不算友好。 筆者結(jié)合官方文檔，與自己的摸索總結(jié)，以最簡單的 FlexBox 組件為例子，帶大家入門 v...

    Keagan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<