자체 Vue UI 구성 요소 라이브러리 생성, 게시

전언
Vue를 사용하여 일상적인 개발을 할 때 우리는 자주 소스가 시작된 UI 라이브러리, 예를 들어 Element-UI, Vuetify 등을 사용한다.
한 줄의 명령만으로 이러한 라이브러리를 현재 프로젝트에 쉽게 도입할 수 있습니다.

npm install vuetify
// or
yarn add vuetify

하지만 UI Component 를 자체 개발하여 여러 프로젝트에서 사용해야 할 때는 어떻게 해야 합니까?우리가 가장 먼저 생각한 것은 과거를 직접 복제하는 것일 수도 있다. 그렇지?
이렇게 하는 것은 매우 편리하지만 두 가지 문제가 있다.

이component가 업데이트를 필요로 할 때 이component에 사용된 모든 업데이트를 수동으로 유지해야 한다

여러 개의component가 공유되어야 할 때 수동 복제가 너무 번거롭다

그렇다면, 우리는 왜 UI 구성 요소 라이브러리를 발표하지 않습니까?
본고에서 필자는 어떻게 한 걸음 한 걸음 자신의 Vue UI 구성 요소 라이브러리를 만들고 발표하는지 소개할 것이다.
프로젝트 초기화
여기는 공식 vue-cli를 사용하여 Vue 프로젝트를 초기화합니다.

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create personal-component-set

새 프로젝트에 들어가서 현재 프로젝트 파일을 봅시다.
다음은 간단한 Vue component를 쓰겠습니다.페이지 제목, 내 개인 정보,github 원본 링크 등 정보를 보여주는 간단한 플러그인 컨트롤을 썼습니다.
코드는 다음과 같습니다.

<template>
    <v-toolbar>
        <v-toolbar-side-icon @click="toMainPage()">v-toolbar-side-icon>
        <v-toolbar-title>Visual Explainv-toolbar-title>
        <v-spacer>v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
            <v-btn flat @click="openMyGithub()">
                <v-avatar size=42>
                    <img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4">
                v-avatar>
                <span style="margin-left:8px;">About me: ssthousespan>
            v-btn>
            <v-tooltip bottom>
                <v-btn slot="activator" flat :href="sourceCodeLink">
                    <v-avatar size=42>
                        <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png">
                    v-avatar>
                    Source Code
                v-btn>
                <span class="top-bar-tooltip">Welcome to fork & star <br/> ; )span>
            v-tooltip>
        v-toolbar-items>
    v-toolbar>
template>

<script>
export default {
  props: ['sourceCodeLink'],
  methods: {
    openMyGithub() {
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = 'https://github.com/ssthouse'
      a.click()
    },
    toMainPage() {
      this.$emit('to-main-page')
    }
  }
}
script>

<style scoped>
.top-bar-tooltip {
  font-size: 18px;
}

a {
  color: black;
}
style>

상기 코드는 매우 간단한 Vue component를 구성하고 props:source CodeLink를 제공하여 맞춤형 다이얼 링크를 편리하게 하고 이벤트:to-main-page를 제공하여 사용자가 홈 페이지로 다이얼을 돌리는 데 사용됩니다.
효과는 다음과 같습니다.
프로젝트 구성
npm에 발표할 수 있도록 현재 프로젝트를 설정합니다.
우선 UI 라이브러리로 가져올 때 자동으로 Vue에 Component를 등록할 수 있도록 입구 파일src/components/index.js을 편집합니다.

import Vue from 'vue'
import TopBar from './TopBar.vue'
const Components = {
  TopBar
}

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name])
})

export default Components

다음에build 프로젝트의 스크립트를 패키지에 추가합니다.json의 scripts:
여기서 --name libraryName 릴리즈할 Library의 이름을 지정하고 위에 새로 추가된 스크립트를 실행합니다.
build에서 다양한 버전의 js 파일을 생성하는 것을 볼 수 있습니다
여기에서 우리는 기본적으로 우리의 *을 발표하는 것을 선택했다.common.js 파일입니다. 그래서 패키지에 있습니다.json에main 속성을 추가합니다.
이 속성을 지정하면 이 구성 요소 라이브러리를 인용할 때main에서 지정한 파일을 기본적으로 불러옵니다.
마지막으로 패키지를 다시 설정합니다.npm에 발표할 파일 경로를 설정합니다.
여기에서 사용자가 우리의 구성 요소 라이브러리에서 사용할 수 있는 모든 파일을 인용하여 넣습니다.
npm 발표
우선 npm 계정을 등록합니다(계정이 있으면 이 절차를 건너뛸 수 있습니다)

npm add user

//          ,      

그리고 npm login 로그인 등록번호의 상태를 사용합니다.
로그인 후 npm whoami를 사용하여 로그인 상태를 확인할 수 있습니다.
발표하기 전에 프로젝트의 이름을 수정합니다. (기존 프로젝트 이름과 충돌하지 않도록 주의하십시오.) @username/projectName의 이름을 사용하는 것을 추천합니다.
이제 UI 구성 요소 라이브러리를 발표할 수 있습니다. 발표하기 전에 build에서 나온 파일을 다시 한 번 컴파일해서 최신 수정 사항을 제공합니다.

npm run build-bundle

다음 명령을 사용하여 프로젝트를 발표합니다.

npm publish --access public

주의해야 할 것은 패키지다.json에서 지정한 버젼 속성: 구성 요소 라이브러리를 업데이트할 때마다 버젼을 업데이트해야 합니다. (같은 버젼의 코드가 다르기 때문에 의문이 생기기 쉽습니다.)
테스트 사용
이렇게 해서 우리는 자신의 UI 구성 요소 라이브러리의 발표를 완성했다.다음은 어셈블리 라이브러리에 필요한 모든 항목에서 사용할 수 있습니다.

npm install --save @ssthouse/personal-component-set

그런 다음 index 파일(예: src/main.js)에 어셈블리 라이브러리를 가져옵니다.

import '@ssthouse/personal-component-set'

이제 Vue의 template에서 구성 요소 라이브러리의 Component를 사용할 수 있습니다.

<template>
  <v-app id="app">
    <top-bar :sourceCodeLink="sourceCodeLink">top-bar>
    <router-view/>
  v-app>
template>

최후
위의 이 절차를 거친 후, 우리는 자신만의 구성 요소 라이브러리를 가지게 되었다.우리는 언제든지 자신의 새 버전의 구성 요소 라이브러리를 업데이트하고 발표할 수 있다.
이 구성 요소 라이브러리에 의존하는 항목은 간단한 npm 명령만 사용하면 업데이트할 수 있습니다:)
데이터 시각화 및 D3.js 관심 있어요?
여기는 제 D3입니다.js, 데이터 시각화github 주소, 환영start & fork:tada:
D3-blog
너도 여기서 나를 찾을 수 있다:)
github 홈 페이지
칼럼.
금을 캐다