프런트엔드 공개 Vue 구성 요소 라이브러리를 구축하는 방법

머리말

개발 과정에서 우리 페이지는 매우 복잡하여 각 팀원이 독립적으로 기능을 개발하고 마침내 전투에 참여해야 했습니다. 이를 위해서는 모든 사람이 공통 구성 요소를 사용하여 개발 속도를 높이고 개발 효율성을 향상시킬 수 있도록 공용 구성 요소 라이브러리가 필요합니다.

Vue.js는 현재 가장 핫한 프론트엔드 프레임워크 중 하나로 국내외 많은 기업에서 채택하고 있습니다. 따라서 실제로 자신의 회사에 적합한 Vue.js 컴포넌트 라이브러리를 구축하는 방법은 프레임워크가 필요한 많은 팀에게 필수 과정이 될 것입니다.

이 기사에서는 참조용으로 회사에 적합한 Vue.js 구성 요소 라이브러리를 구축하는 방법을 단계별로 안내합니다.

1. 컴포넌트 라이브러리 구축

Vue 컴포넌트는 인터페이스의 일부 복잡한 DOM 구조와 스타일을 독립적인 컴포넌트로 캡슐화하여 여러 인터페이스가 이를 참조하여 각각의 비즈니스 로직을 처리할 수 있도록 하는 추상 개념입니다.

1. 구성 요소 라이브러리에 대한 기술 솔루션 결정

구성 요소 라이브러리를 구축하기 전에 구성 요소 라이브러리에 대한 기술 솔루션을 결정해야 합니다. 두 가지 일반적인 사항이 있습니다. 타사 라이브러리를 통해 구성 요소를 도입하는 것과 구성 요소를 독립적으로 개발하는 것입니다.

타사 라이브러리를 통해 구성 요소를 도입하면 타사 구성 요소 라이브러리를 사용하여 개발 효율성과 유지 관리 비용을 개선할 수 있습니다. 단점은 타사 구성 요소 라이브러리의 사양을 준수해야 하며 상대적으로 유연성이 떨어진다는 것입니다. 가난한.

독자적으로 개발된 컴포넌트로 컴포넌트 라이브러리를 자유롭게 커스터마이즈하고 회사의 사양을 준수할 수 있지만 개발, 유지 관리 및 업데이트에 더 많은 노력이 필요합니다.

실제 상황을 바탕으로 관리 및 유지 관리를 용이하게 하기 위해 구성 요소를 독립적으로 개발하기로 결정했습니다.

2. 프로젝트 초기화

Vue CLI 3를 사용하여 프로젝트 뼈대를 빠르게 구축하세요.

    $ vue create my-component-lib
    $ cd my-component-lib

여기에서는 babel, router 및 vuex를 사용하여 수동 구성을 선택합니다.

다음으로 프로젝트에 지원을 줄이고 지원을 추가합니다.

    $ npm install less less-loader node-sass sass-loader -D

설치가 완료된 후 src 폴더 아래에 새 자산 폴더를 만들고 전체 구성 요소 라이브러리의 스타일 제어를 위해 스타일 파일 index.less를 추가할 수 있습니다.

3. 컴포넌트 개발

src 폴더 아래에 개발된 컴포넌트를 넣을 컴포넌트 폴더를 생성합니다. 동시에 유지 관리 및 보기를 용이하게 하기 위해 구성 요소 폴더 아래에 또 다른 index.js 파일을 만들 수 있습니다. 각 구성 요소에는 관리를 위한 별도의 폴더가 필요합니다.

여기에서는 구성 요소 라이브러리의 개발을 보여주기 위해 HelloWord.vue의 샘플 구성 요소를 작성합니다.

    <template>
      <div class="hello-world">
        <h1>Hello World</h1>
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        message: {
          type: String,
          default: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <style scoped>
    .hello-world {
      font-size: 14px;
      line-height: 24px;
      color: #333;
    }
    </style>

참고: 현재 구성 요소의 스타일이 다른 구성 요소에 영향을 미치지 않도록 구성 요소의 CSS 스타일에 범위 속성을 추가해야 합니다.

4. 구성 요소 등록

구성 요소를 등록하는 방법에는 글로벌 등록과 로컬 등록의 두 가지 주요 방법이 있습니다.

글로벌 등록을 사용하면 어디에서나 구성 요소를 참조할 수 있지만 로컬 등록은 현재 구성 요소 내에서만 사용할 수 있습니다. 물론, 관리의 편의를 위해 컴포넌트를 특수 파일에 등록하도록 하겠습니다.

프로젝트 항목 파일 src/main.js에 컴포넌트를 등록합니다.

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import HelloWorld from '@/components/HelloWorld'

    Vue.config.productionTip = false

    Vue.component('HelloWorld', HelloWorld)

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

이제 프로젝트에서 HelloWorld 컴포넌트를 사용할 수 있습니다.

    <template>
      <div class="container">
        <HelloWorld message="Welcome to my component library" />
      </div>
    </template>

2. 컴포넌트 라이브러리 출시

컴포넌트 라이브러리가 개발된 후에는 개발자가 npm을 통해 컴포넌트 라이브러리를 다운로드하여 사용할 수 있도록 npm에 게시해야 합니다.

1. 패키징 명령 구성

package.json 파일에 다음 명령을 추가합니다.

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lib": "vue-cli-service build --target lib --name my-component-lib ./src/components/index.js"
    }

위 명령에서는 구성 요소 라이브러리를 패키징하기 위한 lib 명령을 사용자 정의했으며 패키징 후 생성되는 파일은 다음과 같습니다. dist 폴더에 위치합니다.

2. 사용자 정의 패키징 구성

패키징된 구성 요소를 보다 사용하기 적합하게 만들기 위해 프로젝트 루트 디렉터리에 새 vue.config.js 파일을 만들고 다음 코드를 추가해야 합니다.

    module.exports = {
      // 组件库名称
      outputDir: 'my-component-lib',
    
      // 配置打包的全局入口组件
      configureWebpack: {
        output: {
          libraryExport: 'default'
        },
        externals: {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
          }
        }
      },
    
      // 配置如何处理一些特殊的 CSS，如全局 CSS 的提取
      css: {
        extract: {
          filename: 'css/[name].css'
        }
      }
    }

그 중, outputDir 매개변수는 패키징 출력 디렉터리를 나타내고,configureWebpack 매개변수는 webpack 구성을 나타냅니다. 따라서 패키지 항목과 libraryExport를 기본값으로 설정해야 합니다. 그러면 구성 요소 라이브러리를 가져올 때 'my-comComponent-lib'에서 X만 가져오면 됩니다. , X에서 기본값을 가져올 필요가 없습니다. externals 매개변수는 webpack 구성을 나타내며 가져온 Vue.js는 무시됩니다.

3. 컴포넌트 라이브러리 릴리스

npm run lib 명령을 실행하여 컴포넌트 라이브러리를 패키징합니다:

    $ npm run lib

패키징이 완료된 후 npm에 게시:

    $ npm login
    $ npm publish

다른 프로젝트에서는 npm install my-comComponent-를 통해 설치합니다. lib 컴포넌트 라이브러리:

    import HelloWorld from 'my-component-lib/components/HelloWorld'

    Vue.component('HelloWorld', HelloWorld)

3. 컴포넌트 라이브러리 버전 관리

컴포넌트 라이브러리를 개발할 때 버전 관리는 매우 중요합니다. 구성 요소 라이브러리 버전을 관리하지 않으면 버그가 발견되면 아무 것도 할 수 없습니다. 더욱이, 개발 과정에서 버전 반복 문제가 필연적으로 발생하게 되며, 버전이 관리되지 않으면 매우 혼란스럽고 팀의 개발 효율성에도 영향을 미치게 됩니다.

버전 관리 방법은 Git 브랜치 관리를 기반으로 합니다. 각 버전은 Git의 브랜치에 해당하며, 개발 과정에서 각 브랜치를 적절하게 개발하고 테스트한 후 최종적으로 버전을 출시하려면 메인 브랜치에 병합해야 합니다.

4. 결론

이 글의 소개를 통해 여러분 모두가 자신의 회사에 적합한 Vue.js 컴포넌트 라이브러리를 구축하고 성공적으로 npm에 게시하는 방법을 알고 있다고 믿습니다. 컴포넌트 라이브러리 개발은 프론트엔드 개발팀이 해결해야 할 문제 중 하나입니다. 따라서 컴포넌트 라이브러리 개발 및 관리 관련 지식을 유연하게 습득하여 회사와 우리 자신의 발전에 기여해야 합니다.

위 내용은 프런트엔드 공개 Vue 구성 요소 라이브러리를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!