vue コンポーネントの作成プロセスの紹介 (コード付き)-jsチュートリアル-php.cn

vue コンポーネントの作成プロセスの紹介 (コード付き)

不言

リリース： 2018-10-16 14:26:15

転載

2319 人が閲覧しました

この記事では、vue コンポーネントの作成プロセス (コード付き) を紹介します。必要な方は参考にしていただければ幸いです。

コンポーネント化は、フロントエンド開発の非常に重要な部分であり、ビジネスから切り離すことで、プロジェクトのコードの再利用率を向上させることができます。さらに重要なのは、パッケージ化してリリースすることもできるということです。よく言われるように、多くのオープンソースのコントリビューターがいるからこそ、今の世界が実現できるのです。

車輪を作りたくないエンジニアは、ポーターの資格を持つことはできません。 vue コンポーネントの開発からパッケージ化、リリースまでのプロセスを見て、Github ホームページを構成してみましょう。この記事では、vue- Clock2 コンポーネントを例として取り上げます。スターへようこそ^_^~~ プロジェクトアドレス

ターゲットフレームワーク: vue
パッケージ化ツール: webpack
リリースソース: npm
コードホスティング: github

# #プロジェクト構造

|-- node_modules
|-- src
| |-- index.js
| |-- vue-clock.vue
|-- docs
| |-- index.html
| |-- index.css
|-- dist

ログイン後にコピー

#src: コンポーネント関連のコード。

node_modules: コンポーネントの依存関係パッケージ。
docs: ドキュメント。コンポーネントは単一ページのように単純にすることも、vuepress を使用することもできます。
#dist: パッケージ化されたコンポーネントのコンテンツ。通常、package.json のメインエントリはこのフォルダー内のファイルを指します。

vue コンポーネントの開発は比較的簡単です。vue- Clock.vue

ファイル、コンポーネント関連を作成します。ロジックの実装。

このコンポーネントは主に、time

属性入力に基づいて対応する時間を表示する時計スタイルを実装します。

    <p>
        </p><p></p>
        <p></p>
        <p></p>
        <b>
            <span>{{h}}</span>
        </b>

ログイン後にコピー

要素を通じて時計のスタイルを描画し、css3 のtransform 属性に基づいて各時点を回転します。

時計の時針は次の点に直接ジャンプしないため、異なる分の時計の針の回転角度を計算する必要があります。 以降、時刻を指定しない場合が追加され、現在時刻が表示され、1分ごとに自動更新されます。

export default {
    data() {
        return {
            timeList: [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
            hourRotate: "rotatez(0deg)",
            minuteRotate: "rotatez(0deg)"
        };
    },
    props: ["time"],
    watch: {
        time() {
            this.show();
        }
    },
    methods: {
        show() {
            this.showTime();
            if (this._timer) clearInterval(this._timer);
            if (!this.time) {
                this._timer = setInterval(() => {
                    this.showTime();
                }, 60 * 1000);
            }
        },
        showTime() {
            let times;
            if (this.time) {
                times = this.time.split(":");
            } else {
                const now = new Date();
                times = [now.getHours(), now.getMinutes()];
            }

            let hour = +times[0];
            hour = hour > 11 ? hour - 12 : hour;
            let minute = +times[1];
            let hourAngle = hour * 30 + minute * 6 / 360 * 30;
            let minuteAngle = minute * 6;
            this.hourRotate = `rotatez(${hourAngle}deg)`;
            this.minuteRotate = `rotatez(${minuteAngle}deg)`;
        }
    },
    mounted() {
        this.show();
    },
    destroyed() {
        if (this._timer) clearInterval(this._timer);
    }
};

ログイン後にコピー

プロジェクト内で直接表示できる時計のレイアウトスタイルもいくつかあります。 vue-時計.vue
次に、プロジェクトに導入して使用できるように、コンポーネントをスローする必要があります。

    // src/index.js
    import Clock from './vue-clock.vue';
    export default Clock;
    if (typeof window !== 'undefined' && window.Vue) {
        window.Vue.component('clock', Clock);
    }

ログイン後にコピー

これでコンポーネントの開発部分が完了しました。コーヒーを飲みながらコードを確認してください。これをパッケージ化して npm に公開します。

パッケージ化と公開

パッケージ化する前に、webpack

の設定ファイル出力を確認します。

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-clock.min.js',
    library: 'Clock',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }

ログイン後にコピー

コンポーネントファイルを dist フォルダーにパッケージ化します。

npm run build

ログイン後にコピー

npm release

Configuration package.json

{
  "name": "vue-clock2",
  "description": "Vue component with clock",
  "version": "1.1.2",
  "author": "bestvist",
  "keywords": [
    "vue",
    "component",
    "clock",
    "time"
  ],
  "main": "dist/vue-clock.min.js",
  "license": "MIT",
  "homepage": "https://bestvist.github.io/vue-clock2/"
}

ログイン後にコピー

ログイン npm

淘宝網ミラーを使用する場合は、修正する必要がありますそれが最初のミラーソースです。

npm config set registry https://registry.npmjs.org/

ログイン後にコピー

// 查看登录人
npm whoami
// 登录
npm login

// 发布
npm publish

ログイン後にコピー

同様の情報が表示された場合は、リリースが成功したことを意味します。

npm notice
+ vue-clock2@1.1.2

ログイン後にコピー

Github ホームページ

ホスティングのためにプロジェクトを Github にアップロードし、基本的な README.md

ドキュメントを構成します。

コンポーネントは npm に公開されているため、README でいくつかのバッジを設定できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// npm 版本 [npm version](https://img.shields.io/npm/v/vue-clock2.svg) // npm 下载量 [npm download](https://img.shields.io/npm/dt/vue-clock2.svg)</pre><div class="contentsignin">ログイン後にコピー</div></div>その他のバッジ構成については、シールドを参照してください

次に、コンポーネントの導入と使用について説明します:

安装：
npm install vue-clock2

使用：
<template>
  <clock></clock>
</template>

<script>
  import Clock from &#39;vue-clock2&#39;;
  export default {
    components: { Clock },
    data () {
      return {
          time: &#39;10:40&#39;
      }
    }
  }
</script>

ログイン後にコピー

さらに詳しい操作や属性の説明については、ドキュメントを来て解決してください。

github プロジェクトの設定を通じて GitHub ページを指定します

vue コンポーネントの作成プロセスの紹介 (コード付き) コンポーネントのドキュメントの説明には次の内容を含める必要があります: