Vue로 Blog 만들기


@ vs code

@ vue

@ component

@ vuex

@ router


반응형 디자인

무료 호스팅

mac os


여러 가지 고려한 끝에, github page를 이용하기로 결정하였습니다.

구글링 시작 


https://stackoverflow.com/questions/47615863/problems-deploying-to-github-pages-with-vue-project


알기 쉽게 정리 잘 되어 있어서 고대로 사용




  1. $ vue init webpack [projectName]
  2. $ cd [projectName]
  3. $ npm install
  4. go to your config/index.js file
  5. modify your build section like this:

    build: { index: path.resolve(__dirname, '../docs/index.html'), assetsRoot: path.resolve(__dirname, '../docs'), assetsSubDirectory: 'static', assetsPublicPath: '', productionSourceMap: true, devtool: '#source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report }

  6. $ npm run build

  7. push it to your github repository
  8. go to the setting in your repository
  9. find your GitHub Pages Section and change the source from 'master' -> 'master/docs'
  10. your page should be on 'https://[userName].github.io/[repositoryName]/#/'


vue init webpack vue-page

npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/macbookmd101/.npm/_logs/2018-02-21T16_26_08_421Z-debug.log

1번 부터 에러가 발생 ... 밑에 에러가 뜨는데 검색 해보니 own을 수정해주어야 설치가 가능하다고 함



ls -la /usr/local/lib/node_modules

이걸 치면 owner가 root로 되어 있는 것을 볼 수 있음

drwxr-xr-x   3 root    wheel  102 Jun 24 23:24 node_modules

이걸 바꿔  주면 됨


whoami


위에걸 치면 active user가 누구인지 알 수 있음



sudo chown -R [owner]: /usr/local/lib/node_modules

수정하면 잘 설치 됨

쭉쭉 수행하다가 5번 build script만 수정하여 줌


github repository 만들고 위 프로젝트 푸시하여줌


push후 자신이 만든 레포지토리에 세팅을 들어감




그 다음 Source를 master에서 docs로 수정


저장하면  'https://[userName].github.io/[repositoryName]/#/' 들어가서 호스팅 된 것을 확인할 수 있음



마지막으로, package.json 파일을 보면 "start": "npm run dev"를 확인할 수 있음.

terminal에서 다음 명령어를 치면 localhost:8080으로 접근할 수 있어 화면 확인이나 디버깅이 가능함



간략하게 보고 요약해서 정리하였으니,, 혹시 모를 누군가에게 도움이 되었으면 합니다.


이제 개발 시작!






'Front > Vue.js' 카테고리의 다른 글

vue github page 만들기  (0) 2019.05.07
Vue component  (0) 2019.04.23
Vue.js 시작하기  (0) 2019.04.15
블로그 이미지

사용자 yhmane

댓글을 달아 주세요