Vue 컴포넌트의 생산 과정 소개(코드 포함)

이 글은 Vue 컴포넌트(코드 포함)의 제작 과정을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

컴포넌트화는 프런트엔드 개발에서 매우 중요한 부분입니다. 이를 비즈니스에서 분리하면 프로젝트의 코드 재사용률을 높일 수 있습니다. 더 중요한 것은 패키징하고 출시할 수도 있다는 것입니다. 속담처럼 집단의 힘은 바로 많은 오픈소스 기여자들이 있기 때문입니다.

바퀴를 만들고 싶지 않은 엔지니어는 자격을 갖춘 포터가 될 수 없습니다. Vue 컴포넌트의 개발부터 패키징, 릴리즈까지의 과정을 살펴보고, Github 홈페이지를 구성해보겠습니다.

이 기사에서는 vue-clock2 구성 요소를 예로 들어 보겠습니다. star에 오신 것을 환영합니다^_^~~ 프로젝트 주소

• 대상 프레임워크: 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 파일을 생성하여 컴포넌트의 관련 로직을 구현하세요. vue-clock.vue 文件，组件的相关逻辑实现。

该组件主要实现一个基于 time 属性输入，显示对应时间的钟表样式。

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

通过元素画出钟表的样式，基于 css3的transform 属性旋转出每个时间点。
因为钟表的时针并不是直接跳到下一个点的，所以需要计算出不同分钟时，时钟指针的旋转角度。
后续增加了不指定时间的情况，显示当前时间并每分钟自动更新。

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-clock.vue

接着我们需要抛出组件，以便在项目中引入使用。

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

这里，组件开发的部分已经完成了，喝杯咖啡，check一下代码，我们要把它打包发布到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发布

配置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
이 컴포넌트는 주로 입력된 time 속성을 ​​기반으로 시계 스타일을 구현하여 해당 시간을 표시합니다.

// npm 版本
[npm version](https://img.shields.io/npm/v/vue-clock2.svg)

// npm 下载量
[npm download](https://img.shields.io/npm/dt/vue-clock2.svg)

요소를 통해 시계의 스타일을 그리고 css3의 변환 속성을 기반으로 각 시점을 회전합니다.

시계의 시침은 다음 지점으로 직접 이동하지 않기 때문에 다양한 분마다 시계 바늘의 회전 각도를 계산해야 합니다.

앞으로는 시간을 지정하지 않으면 현재 시간이 표시되며 1분마다 자동으로 업데이트됩니다.

安装：
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>

프로젝트에서 직접 볼 수 있는 시계의 레이아웃 스타일도 있습니다. vue-clock.vue

그런 다음 프로젝트에 도입하고 사용할 수 있도록 컴포넌트를 던져야 합니다.

rrreee여기서, 컴포넌트 개발 부분이 완료되었습니다. 커피 한잔 마시고 코드를 확인해보겠습니다.

패키징 및 게시

패키징하기 전에 webpack의 구성 파일 출력을 확인하세요.
• rrreee

  구성 요소 파일을 dist 폴더에 패키징합니다.

  rrreee
• npm release

package.json 구성
• rrreee

  npm에 로그인

  Taobao 미러를 사용하는 경우 먼저 미러 소스를 수정해야 합니다.

  rrreeerrreee
비슷한 정보가 보인다면 출시가 성공한 것입니다.
• rrreee
  Github 홈페이지

호스팅을 위해 프로젝트를 github에 업로드하고 기본 README.md 문서를 구성합니다. 컴포넌트가 npm에 공개되었기 때문에 README에서 여러 배지를 구성할 수 있습니다. rrreee

더 많은 배지 구성을 보려면 방패를 확인하세요

그런 다음 구성 요소 소개 및 사용법을 설명하세요.

rrreee

더 자세한 상호 작용이나 속성 설명은 문서에 남습니다. 🎜github 프로젝트의 설정을 통해 GitHub 페이지를 지정하세요🎜🎜🎜🎜🎜🎜🎜구성 요소 문서 설명에는 다음이 포함되어야 합니다.🎜🎜🎜🎜구성 요소 소개 방법🎜🎜🎜🎜구성 요소 사용 방법🎜🎜🎜🎜간단한 예🎜🎜 🎜 🎜구성 요소 속성 Description Description🎜🎜🎜🎜🎜Summary🎜🎜Development-> Release-> Hosting🎜컴포넌트 휠의 제작 과정을 대략적으로 소개했습니다. 🎜🎜🎜

위 내용은 Vue 컴포넌트의 생산 과정 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!