Vue 구성 요소 라이브러리를 사용하여 npm에 게시 구현

이 글에서는 Vue 컴포넌트 라이브러리를 npm에 게시하는 방법을 자세히 소개하고 관심 있는 친구들이 참고할 수 있도록 코드 예제를 공유합니다.

나만의 컴포넌트 라이브러리 세트를 만들어 npm에 게시했습니다. 프로젝트 코드는 https://github.com/hamger/hg-vcomComponents

Preparation

• npm 계정 만들기

• 에서 확인할 수 있습니다.

  vue-cli로 설치

프로젝트 빌드

vue init webpack hg-vcomponents
cd hg-vcomponents
cnpm install

디렉토리 구조

- vue-flag-list
  + build
   + dist // 存放发布到npm的代码
   - src
     - components // 存放组件源代码 和 README.md
      - arrows
         arrows.vue
         README.md
       - round
        round.vue
         README.md
      index.js // 组件导出文件
    - examples // 存放组件的 demo
      arrows.vue
       round.vue
       index.vue // 组件 demo 的入口
     - router
       index.js // 引入 examples 下的组件，并配置路由
     App.vue
     main.js
   ...

내부 코드에 대한 자세한 내용은 GitHub를 참조하세요. 도움이 되셨다면 별표를 눌러주세요.

프로젝트 구성

프로젝트를 npm에 업로드하려면 일부 위치를 구성해야 합니다.

build/webpack.base.conf.js

entry: {
  app: process.env.NODE_ENV === 'production'
   ? './src/components/index.js' // 生产模式下导入文件
   : './src/main.js' // 开发模式下导入文件
},

package.json

"private": false, // 因为组件包是公用的，所以 private 为 false
"main": "dist/hg-vcomponents.min.js", // 导出文件名，即 import 引入的文件

.gitignore

dist 폴더에 있는 파일이 익스포트할 파일이므로 . gitignore 파일 코드 업로드 시 패키지 파일이 업데이트되도록 제거하세요.

개발 및 제작

webpack.base.conf.js의 구성으로 인해 프로젝트의 개발 및 제작이 독립적입니다.

npm run dev를 사용하여 개발 환경에 들어가면 쉽게 디버깅할 수 있도록 구성 요소의 데모를 볼 수 있습니다. npm run build를 사용하여 구성 요소 라이브러리를 패키징합니다.

Publish to npm

npm에 로그인한 후 루트 디렉터리에 명령줄을 입력합니다(코드를 업데이트할 때마다 동일한 작업 수행)

npm version patch
npm publish

완료! 이제 npm install hg-vconComponents를 사용하여 다른 곳에서 작성한 구성 요소 라이브러리를 다운로드할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Vue 프로젝트에서 프로젝트 구조를 초기화하기 위해 vue-cli 스캐폴딩을 사용하는 방법에 대한 자세한 설명

vue와 vue-i18n을 결합하여 배경 데이터의 다국어 전환 방법 구현

vue.js 배열 업데이트 method_vue.js의 $set 및 $set

위 내용은 Vue 구성 요소 라이브러리를 사용하여 npm에 게시 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!