npm, vue3 사용자 정의 구성 요소 라이브러리 출시
프로젝트 생성
vue create test-ui
맞춤 구성요소
사용자 정의 구성 요소를 만듭니다. 구성 요소 이름은 필요에 따라 결정됩니다. 폴더당 하나의 구성 요소를 갖는 것이 가장 좋습니다. 아래 그림은 제 예입니다.
src/comminents
컴포넌트는 페이지를 작성할 때와 동일하며 소위 컴포넌트라는 것이 편리하고 실용적입니다. 페이지를 다른 프로젝트로 반복적으로 이동할 필요가 없으며 로컬 프로젝트에 직접 설치할 수 있습니다. 다음 그림은 구성 요소의 예입니다.
컴포넌트를 작성한 후 App.vue에서 정상적으로 사용할 수 있는지 테스트해 볼 수 있습니다.
게시 구성
구성요소 등록
구성 요소 디렉터리에 새 index.js 파일을 만들고 여기에 게시하려는 구성 요소를 작성합니다.
vue.config.js 파일 수정
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
})
package.json 파일을 수정 하고 패키징 명령 및 구성 요소 라이브러리 정보를 구성합니다.
패키징 명령:
–target lib 키워드는 패키징할 디렉터리를 지정합니다.
–name은 패키지된 파일의 이름입니다.
–dest는 패키지된 폴더의 이름입니다.
"lib": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --target lib --name cjuly-ui --dest lib ./src/components/index.js"
구성요소 정보:
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。
참고: npm에 구성 요소 라이브러리의 패키지 이름을 게시한 사람이 아무도 없으므로 게시할 수 없습니다. npm 공식 웹사이트로 이동하여 동일한 이름을 게시한 사람이 있는지 확인할 수 있습니다.
https://www.npmjs.com/
무시 파일 설정
src 디렉터리에 .npmignore 파일을 생성하고 무시하도록 설정합니다. 이 파일의 구문은 .gitignore와 동일합니다. npm에 게시할 때 무시할 디렉터리나 파일을 설정합니다.
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
jsconfig.json
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
포장 시작
패키징 명령 실행
npm run lib
패키징이 완료되면 프로젝트 디렉터리에 패키징된 파일을 저장하는 추가 lib 폴더가 생깁니다.
npm 계정 등록
https://www.npmjs.com/signup
회원가입 후 로컬로 로그인
# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login
게시 및 사용
풀어 주다
해제 명령 실행
npm publish
사용
이 구성 요소 라이브러리를 사용하려는 프로젝트에 설치하고 도입하십시오.
구성 요소 라이브러리를 설치합니다. 구성 요소가 업데이트되면 이 명령을 다시 실행하세요.
npm install cjuly-ui
main.js 에 전역적으로 도입됨
# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);
# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')
그냥 요소처럼 직접 사용하세요
구성 요소 라이브러리 업데이트
구성 요소가 수정된 경우 구성 요소 라이브러리 프로젝트의 npm 패키지 디렉터리 로 업데이트 하고 다음 명령을 실행 해야 합니다 .
npm run lib
npm version patch
npm publish
npm 버전 패치 시 오류가 발생할 수 있으니, 아래 명령어를 실행하신 후, 위의 version update release 명령어를 다시 실행해 주시면 됩니다.
git add .
git commit -m "publish to npm"
참고: 게시 후 npm 주소를 다시 Taobao 미러로 설정하고 다시 게시할 때 npm 주소로 전환하는 것이 가장 좋습니다.
# npm发布地址
npm config set registry=https://registry.npmjs.org
# npm淘宝镜像
npm config set registry https://registry.npm.taobao.org/