기타

Parcel Vue SFC 환경 설정

jinist 2022. 5. 11. 11:14

 

 

일단 뷰 자체의 환경을 처음 만들어 본다는 가정으로 작성을 할 예정이다.

 

Parcel의 경우 패키지와 구성옵션을 신경쓰지 않고

간단하게 프로젝트를 시작할 수 있는 환경을 제공한다

 

 

1. npm init -y를 통해 package.json 생성

 

2. 최신버전의 vue 설치

npm i vue@next

 

 

3. src폴더 생성 후 하위 파일들 생성

src

ㄴ App.vue

ㄴ index.html

ㄴ main.js

 

 

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script type="module" src="./main.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

* parcel 세팅에서는 script부분의 type을 module로 설정하고 main.js를 불러온다.

 

 

App.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello Vue!",
    };
  },
};
</script>

 

 

main.js

import * as Vue from "vue";
import App from "./App.vue";

Vue.createApp(App).mount("#app");

생성한 컴포넌트 불러오기'

 

 

이 과정에서 

vue 파일을 생성했는데 파일 내부의 텍스트가 일반 텍스트로 처리가 되기 때문에
vscode의 Vetur 확장을 설치했다.

 

3. parcel 설치

 npm i -D parcel

 

4. package.json에서 script 작성

  "scripts": {
    "dev": "parcel ./src/index.html",
    "bulid": "parcel build ./src/index.html"
  },

 

개발서버를 오픈해서 확인 할 개발용과 배포용으로 사용할 명령어를 입력해준다.

 

npm run dev or npm run build 명령어를 입력하면

자동으로 dist폴더가 생성된다.

 

 

✅ 필요한 패키지들은 직접 설치해주어야 한다.

 

+ SASS 사용

 

npm i sass -D

 

App.vue의 아래와 같이 작성을 하면 알아서 빌드 시 parcel이 컴파일 해준다.

<style lang="scss">
$color: green;
h1 {
  color: $color;
}
</style>