최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰


   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들이 도움되었다

https://parceljs.org/


- vuejs 예제코드 참고

https://alligator.io/vuejs/vue-parceljs/

'■ 프론트엔드 ■ > Parcel' 카테고리의 다른 글

08. concat 으로 파일 합치기  (0) 2018.05.02
07. scss 연동하기  (0) 2018.04.30
05. vue, babel 설치 .babelrc 셋팅 하고 출력하기  (0) 2018.04.30
04. npm init  (0) 2018.04.30
03. md 파일작성  (0) 2018.04.30
댓글