기본 콘텐츠로 건너뛰기

라벨이 VIte인 게시물 표시

[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.t...

quasar + vite + vue + typescript

  quasar + vite + vue + typescript <Mac> 1. 사전 작업 pyenv + virtualenv + poetry 설치 python 3.11.1 설치 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이 릴리즈 되면서 많은 환경의 변화가 있었습니다. 그래서 어떻게 선택해야 할까? 정리해봤습니다. 계속 변해서 업데이트 ....