[2023-05-31] Quasar + vite + vue 에서 raw-loader를 대체하기 vite-raw-plugin

안녕하세요. 클스 입니다.

오늘은 5월의 마지막 날이네요

Quasar는 vue3 + vite를 기반으로 합니다. 그런데 초반에 text 파일을 읽어서 처리하는데

raw-loader 를 사용했습니다. 이것은 webpack 기반이라 vite와는 맞지 않습니다.

그래서 yarn install 을 하면 아래와 같이 경고가 발생합니다.

yarn install v1.22.19

[1/5] 🔍  Validating package.json...

[2/5] 🔍  Resolving packages...

[3/5] 🚚  Fetching packages...

[4/5] 🔗  Linking dependencies...

warning " > raw-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

[5/5] 🔨  Building fresh packages...

✨  Done in 4.53s.

오늘은 똑 같은 기능을 하면서 vite 기반의 라이브러리로 대체해보고자 합니다.

먼저 raw-loader 삭제 합니다.

$ yarn remove raw-loader

그리고 vite-raw-plugin 을 설치합니다.
$ yarn add vite-raw-plugin

소스는 하나도 수정할 필요가 없습니다.

package.json 에 정상적으로 삭제되고 설치된 것을 확인 할 수 있습니다.

"vite-raw-plugin": "^1.0.1",

<script lang="ts">

import { useQuasar } from 'quasar';

import { defineComponent, defineAsyncComponent, ref } from 'vue';

import getVueTemplate from 'src/ztemplate/vue_gen_template.txt?raw';

... 생략 ...

export default defineComponent({

name: 'LoginPageEx',

components: {

    //TODO: Your components

},

setup() {

const $q = useQuasar();

return {

    //TODO:

};

},

data() {

return {

    //TODO:

};

},

methods: {

showFile() {

console.log('getVueTemplate > ', getVueTemplate);

this.$q

.dialog({

title: 'Source Code Here <클립보드로 들어가 있어요>!!!',

message: getVueTemplate,

style: 'min-width:50vw;min-height=50vh',

html: false,

})

.onOk(() => {

// console.log('OK')

})

.onCancel(() => {

// console.log('Cancel')

})

.onDismiss(() => {

// console.log('I am triggered on both OK and Cancel')

});

},

... 생략 ...

기존소스 변경없이 적용되니 좋네요~

이상입니다.

quasar + vite + vue + typescript

 quasar + vite + vue + typescript <Mac>

1. 사전 작업

1. pyenv + virtualenv + poetry 설치
2. python 3.11.1 설치
3. virtualenv로 가상환경 생성 py3.11.1

2. 환경

$ pyenv activate py3.11.1
$ yarn global add @quasar/cli
$ npm install -g @vue/cli
$ mkdir -p ~/myprj/quasar && cd $_

* vue3js + vite + quasar + typescript 로 프로젝트가 만들어짐
$ yarn create vite my-vue-app --template vue

* 실행
$ vite dev

  VITE v4.0.2  ready in 377 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

• 결과 <브라우저에서 확인>

삭제

VueJS 개발 환경 구축 (feat. MacOS)

왜? VueJS를 선택했나?

---------------------------------

vuejs 는 이젠 많은 회사들이 도입해서 사용하고 있습니다.. 

리액트는 프로젝트에 많은 사람이 필요하고, vuejs 는 개발자가 별로 없을때 사용하면 좋을 듯합니다. 

그런데 vuejs 3이 릴리즈 되면서 많은 환경의 변화가 있었습니다.

그래서 어떻게 선택해야 할까? 정리해봤습니다. 계속 변해서 업데이트 ....