[Electron / Vue.js] Vue.js로 만든 앱 Electron 으로 배포해보기 - 1

[Electron / Vue.js] Vue.js로 만든 앱 Electron 으로 배포해보기 - 1


웹퍼블리싱을 하면서 리스트를 만들때 태그로 감싸는 작업을 너무하기 귀찮아서 만든 앱이 있다.
처음엔 HTML+javascript 로 만들었다가 다음에는 자바.exe 파일로 만들었고 최종적으로 vue.js + electron 조합으로 시도하였다.


java로 만든 easyHTML.exe [다운로드]
혹시 이걸 검색해서 오셨다면 ㅎㅎ 아무나 사용해도 좋습니다.

1. vue.js 로 만든앱을  npm run build 로 빌드한다.

2. electron-quick-start 로 app을 바로 만든다. -> npm install 로 설치한다.
https://github.com/electron/electron-quick-start

3.  vue.js 빌드한 파일을 electron index.html 에 있는 곳에 넣는다.

4. npm start 로 앱을 시작해본다.

5. npm install electron-packager --save-dev  로 패키징을 한다.
package.json 파일에 빌드를 추가한다.


  "scripts": {
    "start": "electron .",
    "build": "electron-packager . ElectronPJ"
  },

6. npm run build 으로 빌드한다.

7. 그럼 프로젝트 경로에 ElectronPJ-win32-x64 이름으로 폴더가 생성되고 ElectronPJ.exe를 클릭하면 실행된다.


+  웹서버에 올려서 웹으로 동작하게 할건지 앱으로 동작하게 할건지는 일단 고민중..
아직 추가 작업을 해야한다.

퍼블리싱 작업할때 찾는 사이트라던지 문서라던지 통합으로 쉽게 접근할 수 있게끔..
우선 태그 리스트작업, 대문자 소문자 변경만 추가되어있다 ㅎㅎㅎ

조금씩 수정할 예정!


댓글

댓글 쓰기

이 블로그의 인기 게시물

[파이썬] #2-모듈설치 및 스파이더(spyder)사용

이미지
[파이썬] #2-모듈설치 및 스파이더(spyder)사용 1. 모듈설치 conda list #설치된 모듈확인 conda install 모듈명1 모듈명2 .. #설치 [설치한 모듈] numpy :  pandas :  matplotlib :  spyder : 코드작업 도와주는 개발도구 모듈 2. spyder 사용 > spyder #프롬프트에서 spyder 명령어를 입력하면 실행됨. # -*- coding: utf-8 -*- """ Created on Mon Nov 18 21:03:01 2019 @author: ZZZPANDA """ # 주석 : 소스코드의 설명을 위해서 사용되는 설명문 (#, """-실제로는 주석이 아님, 메모리낭비) # 자동완성 : crtl + space # 단축키 : ctrl+1 # run(실행) : 단축키 F5 # Run selection or current line (선택된곳만 실행) : 단축키 F9 #변수선언 number = 10 number = 15 #출력문사용 # print 함수사용 # python은 '' , "" 둘다 가능. print(number) print("Hello Python~~!") print('') print("오늘은 {0}월 {1}일 입니다.".format(11,18)) import tkinter as tk window=tk.Tk() window.title('Hello Python Window') window.geometry('300x300+300+300') window.resizable(False, True) window.mainloop()
자세한 내용 보기

[Tool-Tip] 에디트플러스에서 자동정렬기능 추가하기

이미지
에디트플러스에서 자동정렬기능 추가하기 처음 코딩을 접할때 에디트플러스로 시작했다. 퍼블리싱을 할때 가볍기로는 제일 좋은 듯하고 (개인취향임.. 다른 에디터는 조금 버벅이는게 느껴진다. ) FTP 쓰기에도 간편하다. 몇 년간 에디트 플러스를 자주 쓰다가 다른 에디터( vscode , atom, eclipse 등..)를 쓰다보니 자동정렬 기능이 항상 아쉬웠다. 다른 에디터로 갈아타려다가 혹시 자동정렬기능이 있을까하여 구글검색을 해보니 어떤 개발자분이 올려둔 정렬 기능이 있더라... 왜 지금찾아봤을까( 검색을 생활화 하자 ) [설정과정] 1. htmlarg.exe 파일을 다운로드한다.  사용환경 : Windows , Editplus / 개발자 : http://www.killrain.net(현재 닫혀있다) 2. 에디트플러스 실행 -> 도구 -> 사용자 도구 구성 -> 추가 -> 다운받은 프로그램(htmlarg.exe) 선택 명령 : 다운로드 받은 htmlarg.exe 파일의 경로 지정 인수 : 정렬을 위한 인수 설정 [ ex : tt? D,head,body,header,footer,nav,section,li,ol,ul D D $(CurSel) ] 동작 : 텍스트 필터로 실행(바꾸기) 3. 적용 -> 확인 으로 완료. 4. 그룹1에 설정했다면  CTRL + 1 ( + 영역선택 ) 단축키로 실행 [인수설정방법] [들여쓰기][서버스크립트][코드들여쓰기] [태그리스트1] [태그리스트2] [태그리스트3] ($CurSel) 들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 코드들여쓰기 : 0~9까지의 숫자, 탭문자를 이용하고 싶으면 t를 사용 서버스크립트 : 아무것도 적지 않으면 php로 설정 (? 와 동일) , jsp, asp 의 경우 %를 쓴다. 태그리스트1 - 들여쓰기할 태그리스트 : D를 이용하면 기본태그(tr,td,d...
자세한 내용 보기

[파이썬] #1- 아나콘다 설치, 아나콘다 파이썬 환경 만들기

이미지
[파이썬]#1- 설치 1. 아나콘다(Anaconda)설치 수학과 과학 분야에서 사용되는 여러 패키지들을 묶어 놓은 파이썬 배포판 https://www.anaconda.com/ Python 3.7 version(현재최신) [download] - Anaconda.exe 파일 Install  중 all user(C드라이브안에 설치) / just me(사용자계정안에 설치) 선택 - Add Anaconda to my PATH enviroment variable 체크해제 ( 환경변수추가 : 기존파이선과 충돌가능성있음 - 체크해제권장 ) - just me 선택시 C:\Users\[사용자명]\.anaconda 경로에 설치 2. Anaconda navigator 시작 - 실행이 무거워서 Prompt 로 개발 3. Anaconda Prompt 실행 (base) C:\Users\사용자>conda --version #아나콘다 버전확인 conda 4.7.12 (base) C:\Users\사용자>python --version #파이썬 버전확인 Python 3.7.4 (base) C:\Users\사용자>conda info --envs #아나콘다 환경확인 # conda environments: # base * C:\Users\사용자\Anaconda3 (base) C:\Users\사용자>conda create -n test python=3.5 #아나콘다 파이선 환경 3.5버전 만들기 Collecting package metadata (current_repodata.json): done Solving environment: failed with repodata from current_repodata.json, will retry with next repodata source. Collec...
자세한 내용 보기