■ 프론트엔드 ■/Parcel
06. vuejs 사용해보기
serpiko
2018. 4. 30. 20:43
06. vuejs 사용해보기
- 아래와 같이 파일 구성해서 vuejs 사용해보자
- Git_parcel-vue/index.html
- Git_parcel-vue/src\main.js
- Git_parcel-vue/src\App.vue
01. index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./src/main.js"></script> </body> </html>
02. APP.vue
<template> <div id="app"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App!' } } } </script> <style lang="css"> #app{ color: #56b983; } </style>
03. main.js
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) });
04. 만약 아래와 같은 에러가 난다면
- 이 에러는 최초 작성할때는 발생하지 않았다
- 블로그 작성을 위해서 똑같은 작업을 두번째 할 때, 발생되었다.
- Cannot find module 'parcel-bundler/src/asstes/JSAsset'
- package.json 에서 의존성 보면 분명 parcel-bundler가 설치되었는데도 에러가뜬다
-g 옵션 통해서 전역적 설치 했는데도?...
- 그냥 프로젝트 폴더에 npm install parcel-bundler --save-dev 설치해서 해결하였다
05. 실행해보자
- npm start 혹은 parcel index.html 으로 Serve 실행
- localhost:1234
[ 참고 링크 ]
- parcel 설치~ React 연동하고 Typescript 강좌
: 작성 내용의 상당부분 이 강좌에서 도움받았다
강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐
https://academy.nomadcoders.co/p/learn-parcel
- parcel 공식홈
: 시작하기의 내용에서 CLI들이 도움되었다
- vuejs 예제코드 참고