[Vue.js] Vue.js 설치(Mac)

Mac 기준

1. Yarn 설치 

(Sudo) npm install -g yarn  ( 권한이 없을 시 맨앞에 sudo 붙여서 실행 )

2. yarn 혹은 npm 으로 설치 

npm install -g @vue/cli

또는

yarn global add vue/cli

yarn global add @vue/cli

yarn global add @vue/cli-init —> 이걸로 

3. 프로젝트 이름 생성

vue init <template-name> <project-name>

위와 같은 커맨드로 프로젝트를 시작할 수 있습니다. 제공되는 템플릿은 총 다섯 가지로 webpack, webpack-simple, browserify, browserify-simple, simple 이 있습니다.

4. 실행

해당 디렉토리로 들어가 yarn dev

 

npm ERR! Maximum call stack size exceeded -> npm 버전이 낮아서 생기는 에러 

 

 

Vue chrome extension 개발법

1. vue 설치

npm install -g @vue/cli

또는

yarn global add @vue/cli

2. 프로젝트 이름 정하기 

vue init webpack my-extension

3. 설치 확인

제대로 설치가 되엇는지 yarn run dev 로 확인 후 로컬 호스트 열기 

4. 폴더 확인

명령어 yarn run build 실행하면 dist 폴더가 생성 

dist 폴더 안에 manifest.json 파일 생성 

5. 프로그램 등록

yarn run build 실행 후 크롬 확장 프로그램 등록하면 성공 

6. 기타

팝업창의 maximum 크기는 width : 800px , height : 600px ,

vue-router 사용 가능 ,

window.location.href=“” 도 사용 가능 

chrome.tabs.create 도 사용가능 

chrome extension storage 데이터 가져오기 

https://stackoverflow.com/questions/42260274/load-data-from-chrome-storage-into-vue-js-data

참고 사이트 : https://viblo.asia/p/viet-chrome-extension-bang-vuejs-Ljy5VoVjKra

소스 : https://github.com/maitrungduc1410/my-extension