vue3+electron12+dll을 사용하여 클라이언트 구성을 개발하는 방법
창고 소스 수정
전자버전 미상으로 인해 서버가 사용 가능하고 빌드 후 흰색 화면이 뜨는 상황이 발생할 수 있으니 주의가 필요합니다. 코드 롤백을 용이하게 하기 위해 사용 가능한 버전을 커밋하는 것이 가장 좋습니다. 더 나은 정보가 있는 사람은 이를 공유하고 싶어합니다.
구성을 시작하기 전에 Yarn 및 npm의 rc 파일을 약간 수정할 수 있습니다. 명령이나 파일을 사용하여 .npmrc 또는 .yarnrc를 직접 수정할 수 있습니다. 이 두 개의 전역 구성 파일은 일반적으로 현재 계정의 C:user 폴더에 있습니다. , 또는 현재 프로젝트 아래에 새 파일 명령 rc 파일을 생성하여 구성을 로컬로 변경합니다.
네트워크 문제로 전자 다운로드가 실패하기 때문에 타오바오 소스로 변경하고, 화웨이 소스도 사용 가능합니다.
npm set config registry http://registry.npm.taobao.org/ npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver npm set config electron_mirror http://registry.npm.taobao.org/electron/ npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/
설치 과정에서 vue create
Startup
해당 시작 명령이 package.json에 어셈블되었습니다.
npm run Electron:serve를 사용하여 개발을 시작하세요
npm run Electron:build를 사용하여 프로덕션용 컴파일 및 패키징
vue- devtools 바꾸기
프로젝트 프로젝트 아래의 src/Background.ts는 Electron의 시작 디렉터리입니다. 개발 환경에서 시작 대기 시간이 길어지면 다음과 같은 상황이 발생합니다
Electron을 실행하는 중...
확장 프로그램 가져오기 실패, 4번 더 시도
확장 프로그램 가져오기 실패, 3번 더 시도
확장 프로그램 가져오기 실패, 2번 더 시도
확장 프로그램 가져오기 실패, 1번 더 시도
은 프로젝트 연결이 필요하기 때문입니다. vue-devtools를 다운로드하고 로드하려면 Google 스토어로 이동하세요.
도구를 로드하는 방법을 여러 가지 시도했지만 모두 실패했기 때문에 임시 해결책은 도구를 제거하는 것입니다. 코드가 발견되었습니다. installExtension을 제거하세요.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
// await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})이전에 여러 가지 방법을 시도했지만 작동하지 않았습니다. 나중에 다음 내용을 주의 깊게 비교한 결과 몇 가지 문제점을 발견했습니다.
vue3 버전은 vue-devtools의 vue2 버전과 다르기 때문에 vue3에서는 vue2의 dev-tools를 사용할 수 없습니다. 따라서 vue3에 해당하는 개발 도구를 다운로드해야 합니다. vue2의 최신 버전은 5.x이고, vue3의 버전은 6.x 베타 버전입니다. 이 버전의 플러그인은 crx4chrome을 통해 다운로드할 수 있습니다. 다운로드한 crx의 압축을 풀고 프로젝트 루트 디렉터리에 복사합니다. 세션 로딩을 사용하여 원래 wait installExtension(VUEJS_DEVTOOLS) 부분을
import {session} from 'electron'
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
await session.defaultSession.loadExtension(path.resolve(vue_devtools))
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})로 교체합니다. 프로젝트를 시작한 후 vue 확장을 볼 수 있습니다.
(노드:5904) ExtensionLoadWarning: E:scanvue3_electronljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com에서 확장 프로그램을 로드하는 중 경고:
인식할 수 없는 매니페스트 키 'browser_action'.
인식할 수 없는 매니페스트 키 'update_ url '.
권한 'contextMenus'를 알 수 없거나 URL 패턴의 형식이 잘못되었습니다.
파일 또는 디렉터리 이름이 _metadata인 확장자를 로드할 수 없습니다. "_"로 시작하는 파일 이름은 시스템에서 사용하도록 예약되어 있습니다.
(`electron --trace-warnings ...` 사용) 경고가 생성된 위치를 표시합니다)
무시해도 됩니다. 귀찮은 프롬프트를 보고 싶지 않다면 tools
Notes
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7532
15
1379
52
82
11
55
19
21
83
Nvgpucomp64.dll로 인해 Windows PC 게임이 중단됩니다.
Mar 26, 2024 am 08:20 AM
Nvgpucomp64.dll로 인해 게임이 자주 충돌하는 경우 여기에 제공된 해결 방법이 도움이 될 수 있습니다. 이 문제는 일반적으로 오래되거나 손상된 그래픽 카드 드라이버, 손상된 게임 파일 등으로 인해 발생합니다. 이러한 문제를 해결하면 게임 충돌을 처리하는 데 도움이 될 수 있습니다. Nvgpucomp64.dll 파일은 NVIDIA 그래픽 카드와 연결되어 있습니다. 이 파일이 충돌하면 게임도 충돌합니다. 이는 일반적으로 LordsofttheFallen, LiesofP, RocketLeague 및 ApexLegends와 같은 게임에서 발생합니다. Nvgpucomp64.dll이 N인 경우 Windows PC에서 게임과 충돌함
Windows 시스템 디렉터리에 CoreMessaging.dll 파일이 누락되는 문제 분석
Feb 11, 2024 pm 11:42 PM
많은 사용자는 컴퓨터를 사용하여 게임을 할 때 coremessaging.dll이 누락되었다는 메시지를 받게 됩니다. 많은 사용자는 즉시 소프트웨어나 게임에 문제가 있다고 생각할 것입니다. 컴퓨터에 dll 파일이 없으면 사용자는 coremessaging.dll 파일을 다운로드할 수 있습니다. 이 사이트에서는 Windows 시스템 디렉토리의 CoreMessaging.dll 파일이 누락되어 찾을 수 없는 문제에 대한 분석을 사용자에게 주의 깊게 소개합니다. Windows 시스템 디렉터리에 CoreMessaging.dll 파일이 없어 찾을 수 없는 문제 분석 1. CoreMessaging.dll 파일 다운로드 2.
vue3+vite: src에서 이미지를 동적으로 가져오기 위해 require를 사용할 때 오류를 해결하는 방법
May 21, 2023 pm 03:16 PM
vue3+vite:src는 require를 사용하여 이미지를 동적으로 가져오고 vue3+vite는 여러 이미지를 동적으로 가져옵니다. vue3을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.
vue3 프로젝트에서tinymce를 사용하는 방법
May 19, 2023 pm 08:40 PM
tinymce는 완전한 기능을 갖춘 리치 텍스트 편집기 플러그인이지만,tinymce를 vue에 도입하는 것은 다른 Vue 리치 텍스트 플러그인만큼 원활하지 않습니다.tinymce 자체는 Vue에 적합하지 않으며 @tinymce/tinymce-vue를 도입해야 합니다. 외국 서식 있는 텍스트 플러그인이며 중국어 버전을 통과하지 못했습니다. 공식 웹사이트에서 번역 패키지를 다운로드해야 합니다(방화벽을 우회해야 할 수도 있음). 1. 관련 종속성을 설치합니다. npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 중국어 패키지를 다운로드합니다. 3. 프로젝트 공용 폴더에 스킨과 중국어 패키지를 새로 만들고 다운로드합니다.
Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법
May 26, 2023 pm 05:31 PM
페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. Vue2에서는 v-if 명령을 사용하여 로컬 DOM을 다시 렌더링하는 것 외에도 새 빈 구성 요소를 만들 수도 있습니다. 로컬 페이지를 새로 고쳐야 할 경우 이 빈 구성 요소 페이지로 점프한 다음 다시 돌아올 수 있습니다. 빈 원본 페이지의 beforeRouteEnter 가드. 아래 그림과 같이 Vue3.X에서 새로 고침 버튼을 클릭하여 빨간색 상자 안에 DOM을 다시 로드하고 해당 로딩 상태를 표시하는 방법입니다. Vue3.X의 scriptsetup 구문에 있는 구성 요소의 가드에는
Vue3가 마크다운을 구문 분석하고 코드 강조 표시를 구현하는 방법
May 20, 2023 pm 04:16 PM
Vue로 블로그 프론트엔드를 구현하려면 마크다운 파싱을 구현해야 합니다. 코드가 있는 경우 코드 하이라이팅을 구현해야 합니다. markdown-it, vue-markdown-loader,marked,vue-markdown 등과 같은 Vue용 마크다운 구문 분석 라이브러리가 많이 있습니다. 이 라이브러리는 모두 매우 유사합니다. 여기서는 Marked가 사용되었고, 코드 하이라이팅 라이브러리로 하이라이트.js가 사용되었습니다. 구체적인 구현 단계는 다음과 같습니다. 1. 종속 라이브러리를 설치합니다. vue 프로젝트에서 명령 창을 열고 다음 명령 npminstallmarked-save//marked를 입력하여 markdown을 htmlnpmins로 변환합니다.
win7 시스템에서 libcurl.dll 누락 문제를 해결하는 방법은 무엇입니까? Win7에서는 libcurl.dll 파일 솔루션을 찾을 수 없습니다.
Feb 12, 2024 am 08:15 AM
win7 시스템에서 libcurl.dll 누락 문제를 해결하는 방법은 무엇입니까? 일반적으로 dll 파일로 인해 일부 프로그램이 정상적으로 사용되지 않을 수 있습니다. 이 문제에 직면한 많은 사용자는 이 문제를 해결하는 방법을 모릅니다. 이러한 상황에 대해 오늘 편집자는 대부분의 사용자와 자세한 솔루션을 공유합니다. 오늘은 win7이 활용되길 바라며, 튜토리얼을 통해 많은 사용자들에게 도움이 되었으면 좋겠습니다. win7 시스템에서 누락된 libcurl.dll에 대한 해결 방법 1. libcurl.dll 파일을 다운로드합니다. 2. 다운로드 후 해당 폴더에 파일을 넣어주세요. 32비트 운영체제와 64비트 운영체제의 경우 경로는 다음과 같습니다. 32비트 Win7 운영체제의 경우 파일을 C:\Windows\SYSTEM32에 직접 복사하세요.
Vue3에서 아바타를 선택하고 자르는 방법
May 29, 2023 am 10:22 AM
최종 효과는 VueCropper 컴포넌트 Yarnaddvue-cropper@next를 설치하는 것입니다. 위의 설치 값은 Vue2이거나 다른 방법을 사용하여 참조하려는 경우 공식 npm 주소: 공식 튜토리얼을 방문하세요. 컴포넌트에서 참조하고 사용하는 것도 매우 간단합니다. 여기서는 해당 컴포넌트와 해당 스타일 파일을 소개하기만 하면 됩니다. 여기서는 import{userInfoByRequest}from'../js/api만 소개하면 됩니다. 내 구성 요소 파일에서 import{VueCropper}from'vue-cropper&
