> 웹 프론트엔드 > JS 튜토리얼 > vue 구성 요소를 npm에 게시하는 방법

vue 구성 요소를 npm에 게시하는 방법

亚连
풀어 주다: 2018-06-23 14:50:55
원래의
1673명이 탐색했습니다.

vue 컴포넌트를 npm에 게시하는 간단한 방법과 단계 과정을 설명하겠습니다. 필요한 친구들은 함께 배우고 참고할 수 있습니다.

1.0 새 프로젝트

1.1 프로젝트 초기화
npm init를 입력하고 나중에 채워야 할 사항을 입력하세요

새 src 디렉터리를 만들고 src 디렉터리에 Alert.vue를 만듭니다

$ npm init
$ mkdir src
$ cd src
$ touch alert.vue
로그인 후 복사

최종 디렉터리 구조

1.2 항목 파일 수정

package.json을 열고 수정

1.3 구성 요소 내용 작성

이 구성 요소의 내용은 원하는 대로 작성해도 됩니다. 먼저 테스트해 보겠습니다. 내가 쓴 글

<template>
  <p class="alert">
    <p>dddddd</p>
  </p>
</template>

<style>
  .alert {
    color: red;
  }
</style>

<script>

export default {
  name:&#39;vue-x-alert&#39;
}

</script>
로그인 후 복사

2.0 npm 등록

npm 공식 홈페이지를 열고 등록한 후 등록된 계정과 비밀번호를 기억하세요, npm-url

2.1 npm에 로그인하고 게시하세요

$ npm login // 登录
$ npm publish
로그인 후 복사

2.3 npm을 열어서 내용을 확인하세요 방금 출시한 구성 요소

그런 다음 이 구성 요소를 프로젝트에서 사용하고 npm으로 설치하고 가져와서 사용하겠습니다

Update package

Modify package.json

"version": "1.1.0 ",

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

jQuery에서 드롭다운 메뉴를 구현하는 방법

vue에서 경로 매개변수 전달을 사용하는 방법

AngularJs에서 양방향 바인딩을 사용하는 방법

탐색경로를 구현하는 방법 네비게이션 기능

위 내용은 vue 구성 요소를 npm에 게시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿