vue 로 플러그 인 을 봉인 하고 npm 에 발표 하 는 방법 절차
vue-flag-list 는 대부분의 국가의 지역 번 호 를 포함 하고 있 습 니 다.오른쪽 삼각형 전개 목록 을 클릭 하면 국가 지역 번 호 를 선택 할 수 있 습 니 다.목록 에 지역 번호 가 없 으 면 스스로 지역 번 호 를 입력 할 수 있 습 니 다.
글로벌 지역 번호 목록
1.1 구성 요소 초기 화
vue-cli 를 사용 하여 구성 요 소 를 초기 화 합 니 다.필요 하지 않 은 것 이 많 지만 이것 에 익숙 하기 때문에 이 단계 로 합 니 다.
vue init webpack vue-flag-list
cd vue-flag-list
cnpm install
npm run dev
<template>
<div id="flag">
...
</div>
</template>
<script>
export default {
name: 'vue-flag-list',
...
}
</script>
<style scoped>
...
</style>
1.3 index.js 추가
import flagComponent from './Vue-Flag-List.vue'
const VueFlagList = {
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component('VueFlagList', flagComponent)
}
}
export default VueFlagList
1.4.1 package.json
{
"name": "vue-flag-list",
"version": "1.0.0",
"description": "A vue plugin for entering and selecting area code",
"author": "guimin",
// ， private false
"private": false,
// main ， ， import XX from ' ' ，
"main": "dist/vue-flag-list.min.js",
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
//
"repository": {
"type": "git",
"url": "git+https://github.com/linmoer/vue-flag-list.git"
},
// ，
"files": [
"dist",
"src"
],
//
"keywords": [
"vue",
"flag",
"code",
"flag code"
],
"license": "MIT", //
// url
"homepage": "https://github.com/linmoer/vue-flag-list#readme",
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
...
},
"engines": {...},
"browserslist": [...]
}
dist 폴 더 를 사용 해 야 하기 때문에.gitignore 파일 에서 dist/를 제거 합 니 다.
1.4.3 webpack.prod.conf.js 파일
다양한 사용 장면 을 지원 하기 위해 서 는 적절 한 포장 형식 을 선택해 야 합 니 다.흔히 볼 수 있 는 패키지 포맷 은 CMD,AMD,UMD 로 CMD 는 노드 환경 에서 만,AMD 는 브 라 우 저 에서 만,UMD 는 두 가지 실행 환경 을 동시에 지원 한다.UMD 형식 을 선택해 야 한 다 는 것 은 분명 하 다.웹 팩 에서 지정 한 출력 형식의 설정 항목 은 output.library Target 입 니 다.지원 하 는 형식 은 다음 과 같 습 니 다.
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'vue-flag-list.min.js',
library: 'VueFlagList',
libraryTarget: 'umd',
umdNamedDefine: true
},
구성 요 소 를
그래서 우 리 는 웹 pack.prod.conf.js 에 externals 를 설정 해 야 합 니 다.다음 과 같 습 니 다.
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
new ExtractTextPlugin({
filename: 'vue-flag-list.min.css'
}),
entry: {
app: './src/index.js'
},
- vue-flag-list
+ build
+ dist
- src
+ img
index.js
Vue-Flag-List.vue
...정식 가방 을 보 내기 전에 현지에서 먼저 가방 을 만 든 다음 에 문제 가 있 는 지 테스트 한 다음 에 문제 가 없 으 면 npm 에 발표 할 수 있 습 니 다.
2.1 로 컬 로 포장 하여 사용
npm build
npm pack새 vue 항목 을 열 고 현재 경로 에서 실행 합 니 다('경로'는 파일 이 있 는 위 치 를 표시 합 니 다)
cnpm install 路径/vue-flag-list-1.0.0.tgz
import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'
Vue.use(VueFlagList)
<flagCode height="30" width="120" @getCode="getCode"></flagCode>
methos: {
getCode(code) {
console.log(code)
}
}
1.npm官网 에 npm 계 정 을 등록 합 니 다.
2.보 낼 항목 루트 디 렉 터 리 로 전환 하고 npm 계 정 에 로그 인하 여 사용자 이름,비밀번호,메 일 을 입력 합 니 다.
npm login
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + [email protected]오랫동안 고생 한 끝 에vue-flag-list플러그 인의 초기 형 태 를 발 표 했 습 니 다.이것 은 아주 간단 한 플러그 인 입 니 다.앞으로 계속 유지 하고 더 많은 실 용적 인 기능 을 추가 할 것 입 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
