머리말
npm을 업로드하기 위해 uniapp 플러그인을 작성하고 손으로 쓴 VUE 스텝 바 컴포넌트 를 추가 했기 때문에이 글은 쓰지 않을 준비가 되었습니다 . 이 글에서는이 스텝 바 컴포넌트가 나중에 npm웨어 하우스에 업로드 될 것이라고 언급 한 다음 저는 uniapp 플러그인을 업로드하는 방법은 VUE 플러그인을 업로드하려고합니다. 업로드는 업로드 할 수 있지만 VUE 프로젝트에 npm을 설치하면 플러그인을 설치할 수 없으므로 다시 생각합니다. 아, uniapp 플러그인 업로드와 VUE 플러그인 업로드가 아직 같지 않은 것으로 밝혀 졌으니이 글이 있습니다!
말리십시오
1. 빈 VUE 프로젝트를 생성합니다.
이전에 VUE 프로젝트 를 생성 할 때 다음 명령을 사용해야합니다.
vue init webpack you-project
그러나 우리는 개발 프로젝트가 아니라 플러그인이므로 완전한 VUE 환경을 만들 필요가 없습니다. 다음 명령을 사용하여
vue init webpack-simple you-project
이 둘의 차이점은
기본적으로 정보를 변경할 필요가 없습니다.이 단계 표시 줄의 플러그인은 sass 종속성을 사용해야하므로 여기에 환경을 설치할 수 있습니다! 전체 프로젝트 구조는 다음과 같습니다!
2. 프로젝트를 시작하고
먼저 다음 명령을 실행합니다.
npm install
여기에 설치하는 데 시간이 오래 걸리므로 cnpm Taobao 미러를 사용하지 마십시오. 여기에서 Taobao 미러로 변경하면 나중에 npm 플러그인을 푸시 할 때 교체해야합니다. 환경 종속성이 설치된 후 프로젝트를 시작합니다.
npm run dev
성공적으로 시작되었습니다!
3. 불필요한 파일 삭제이
단계는 수행 할 수 있거나 수행하지 않을 수 있습니다. 중요한 것은 플러그인을 사용하는 동료가 플러그인 종속성을 볼 때 너무 집착하지 않도록하는 것입니다! 두 그림을 비교하면이 단계의 의미를 명확하게 이해할 수 있습니다!
삭제되지 않은 플러그인입니다. 삭제 된 플러그인입니다.
이 영역에
대해 걱정하지 마십시오. 나중에 설명하겠습니다.
assets 디렉토리를 삭제하십시오.이 디렉토리는 리소스를 저장하기위한 것입니다. 플러그인에 정적 리소스가 없으면 제거 할 수 있습니다., 나머지는 이동할 필요가 없습니다!
4. 플러그인 작성 플러그인
프로젝트의 양이 상대적으로 많을 경우 별도의 디렉토리를 생성 할 수 있으며, 내 플러그인은 상대적으로 간단하기 때문에 이렇게 큰 선반을 만들고 싶지 않습니다. 구조는 다음과 같습니다. :
simple-step-bar.vue, 이것은 스텝 바 컴포넌트 코드이고, index.js는 컴포넌트를 외부에 노출시키는 파일입니다. 여기서 주목해야 할 것은 설치입니다. Vue 플러그인은 플러그인을 사용할 때 호출되는 공용 메소드 설치, 즉 Vue.use (yourPlugin)를 제공해야합니다. 이러한 방식으로 모든 구성 요소가 Vue에 전역 적으로 주입됩니다.
5. 구성 항목 webpack.config.js를 수정합니다.
entry: './src/plugin/index.js',//指定插件的对外暴露文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//build后项目生成目录
filename: 'simple-step-bar.js',//build后的文件名
library: 'simple-step-bar', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
- 라이브러리 : 필요한 경우 모듈의 이름을 지정합니다.
- libraryTarget : 여러 사용 시나리오를 지원하려면 적절한 패키징 형식을 선택해야합니다. 일반적인 패키징 형식은 CMD, AMD, UMD입니다. CMD는 Node 환경에서만 실행할 수 있고 AMD는 브라우저 측에서만 실행할 수 있으며 UMD는 동시에 두 가지 실행 환경을 지원합니다. 당연히 UMD 형식을 선택해야합니다.
- umdNamedDefine : UMD 구성 프로세스에서 AMD 모듈의 이름을 지정합니다. 그렇지 않으면 익명 정의를 사용하십시오.
때로는 lodash, 밑줄 및 기타 도구 라이브러리와 같은 라이브러리를 개발하려고합니다. 이러한 라이브러리는 commonjs 및 amd에서 사용하거나 스크립트에서 도입 할 수 있습니다.
이때 우리는 라이브러리와 libraryTarget을 사용할 필요가 있습니다. 우리는 코드를 작성하기 위해 ES6를 사용하고, 그것을 범용 UMD로 컴파일하고 그것을 웹팩에 넘겨 주기만하면됩니다.
6. 플러그인 컴파일
npm run build
7. package.json 파일을 수정하여
오픈 소스 를 릴리스 하므로이 필드를 false
"private": false 로 변경해야합니다 .
이것은 simple-step-bar
: "dist / simple-step-bar.js"를 가져올 때 검색 할 "main" 경로를 나타냅니다 .
注意这里如果不指定这个文件会导致引用组件是找不到这个组件
8. README.md 파일을 작성합니다.
사용자가 작성한 플러그인을 추측하도록하려면이 단계를 수행 할 필요가 없습니다. 원하지 않으면 README.md 파일에 플러그인 사용 방법을 자세히 알아보세요!
플러그인이 npm을 업로드 한 후이 파일은 다른 사용자가 플러그인을 입력 한 후 사용자를 안내합니다! 아래 그림과 같이
9. 로컬로 npm에 로그인
npm login
npm 계정이없는 경우 공식 웹 사이트로 이동하여 등록하면 npm 공식 웹 사이트 에서 완료됩니다 . 이메일 확인 문제에주의하세요. 그렇지 않으면 플러그인을 업로드 할 수 없습니다. npm을 업로드하는 uniapp 플러그인 은이 문서에 설명되어 있습니다.
10. 플러그인 푸시 npm
npm publish
푸시가 성공하면 콘솔이 위와 같고 알림이 바인딩 된 사서함으로 전송되므로 확인할 필요가 없습니다!
그런 다음 npm웨어 하우스 백엔드가 플러그인 수를 변경합니다!
우리가 푸시 한 간단한 스텝 바 플러그인입니다. 바로 표시되지 않고 창고 플러그인 수만 변경됩니다. 약 2 분 후에 만 표시됩니다!
그런 다음 여기에서 npm에 VUE 플러그인을 업로드하면 완료됩니다!
11. npm 다운로드 플러그인 테스트
npm i super-step-bar
설치에 성공하면 node_modules에 현재 플러그인이 있습니다.
12. 프로젝트는 간단한 스텝 바 플러그인을 사용합니다.
import simpleStepBar from 'simple-step-bar'
Vue.use(simpleStepBar);
vue 인터페이스
에서 테스트 코드 사용
<template>
<div id="app">
<div class="description-div">默认</div>
<simple-step-bar></simple-step-bar>
<div class="description-div">rem单位</div>
<div>
<button @click="less(1)">后退</button>
<button @click="plus(1)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3' :unit='"rem"'
:stepList="stepList1" :currentStep="currentStep1"
:itemWidth='40' :lienWidth='0.1'
></simple-step-bar>
<div class="description-div">px单位</div>
<div>
<button @click="less(2)">后退</button>
<button @click="plus(2)">前进</button>
</div>
<simple-step-bar
:totalWidth='720' :totalHeight='48' :unit='"px"'
:stepList="stepList2" :currentStep="currentStep2"
:itemWidth='240' :lienWidth='2'
></simple-step-bar>
<div class="description-div">个性化样式</div>
<div>
<button @click="less(3)">后退</button>
<button @click="plus(3)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3'
:unit='"rem"' :stepBackground='"#FFFFFF"'
:stepList="stepList3" :currentStep="currentStep3"
:itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
:processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
:processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
></simple-step-bar>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
stepList1:["步骤a","步骤b"],
stepList2:["步骤1","步骤2","步骤3"],
stepList3:["步骤一","步骤二","步骤三","步骤四"],
currentStep1:1,
currentStep2:2,
currentStep3:3,
}
},
methods:{
plus(type){
switch (type) {
case 1:
this.currentStep1++;
break;
case 2:
this.currentStep2++;
break;
case 3:
this.currentStep3++;
break;
}
},
less(type){
switch (type) {
case 1:
this.currentStep1--;
break;
case 2:
this.currentStep2--;
break;
case 3:
this.currentStep3--;
break;
}
}
}
}
</script>
<style lang="scss">
#app {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.description-div{
margin-top: 2rem;
height: 2rem;
}
</style>
컴포넌트 의 자세한 사용법 에 관해서는 VUE 스텝 바 컴포넌트 손글씨 , 나쁘지만 스텝 바 함수 만 작성하고 싶었지만 플러그인으로 작성되었고 이제 오픈 소스 마운트 npm이 제공되었습니다!
npm : 단순 단계 막대
gitee : 단순 단계 막대
다른
npm에서 업로드 한 플러그인의 이름은 다른 사람의 플러그인 이름과 같을 수 없습니다 . 버전은 중복
될 수 없으므로 변경할 때마다 버전을 수정해야합니다.
npm version 1.1.0
새 버전을 업로드 할 때마다 푸시하기 전에 다시 빌드해야합니다.
npm run build
웨어 하우스에 이미 플러그인이있는 경우 삭제 후 24 시간 만에 삭제 된 이름을 사용할 수 있습니다!
npm unpublish guitest@1.0.1 //指定版本号
또한 이는 주로 보안상의 문제로 인한 것입니다 .Azer NPM 탈퇴 이벤트 이후 npm은 다음과 같은 새로운 버전의 규칙을 발표했습니다.
- 버전 업데이트가 24 시간 미만인 패키지는 제거 할 수 있습니다.
- npm 관리자에게 24 시간 동안 패키지를 제거하려면 연락해야합니다.
- npm 관리자가 참여하면 npm은 해당 패키지에 의존하는 다른 패키지가 있는지 확인하고, 그렇다면 제거 할 수 없습니다.
- 패키지의 모든 버전이 제거되면 npm은 빈 자리 표시 자 패키지를 업로드하여 후속 사용자가 실수로 악의적 인 대체품을 인용하는 것을 방지합니다.