CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

Nuxt.js 3 에서 npm을 이용하여 pinia를 설치하는데 바로 오류가 출력되었습니다.

code ERESOLVE
ERESOLVE could not resolve
while resolving: undefined@undefined
....

✔ 해결방법부터...!

//package.json

"overrides": {
    "vue": "latest"
  },

이에 해당하는 내용을 추가해주시고, npm 을 이용하여 pinia를 재설치해주시면 됩니다!

✔ 서사

이번엔 Nuxt.js 3 에서 store 를 사용해보고자 pinia를 사용하게 되었습니다. 기존 Vue.js3 프로젝트에서는 그냥 vueStore를 사용했었는데, 그때 알게된 store 대체 라이브러리 PINIA🍈이번에는 사용해보자, 라고 생각해서 설치를 시작해보았습니다.

그리고 등장하게된 위의 에러.

예전에도 그렇고 이것과 유사하게 생긴 에러가 자주 등장하였었는데, 해결을 못하고 프로젝트를 지우곤 했었습니다 😢

그런데 우연찮게 Pinia 공식 문서에서 이에 대한 문구가 살짝 있는게 보이더라구요? (뭐지.. 다른데도 있나?)

감동😢

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

해당 웹사이트 공유

에러 해결은 역시 stackoverflow

Vue-cli webpack4.0 version 에서 sass를 개별 설치하려고

$ npm i node-sass
$ npm i sass-loader

를 했는데 에러가 발생하였다.

node-sass는 정상적으로 설치가 완료되었지만, sass-loader를 설치하지 못했다.

그래서 개발자버전으로 다운로드 하려했지만 또 에러를 뱉어냈다.

$ npm i sass-loader -D

■ 해결방법

Vue-cli webpack 4.0의 버전은 그에 맞는 알맞은 버전의 sass를 다운로드 받아야한다고 명시되어져있다.

$ npm install -D sass-loader@10.0.5 node-sass

10.0 version을 다운받아도 무방하다.

안녕하세요 상훈입니다.

Vuejs를 설치하여 사용 할 수 있도록 vue js 설치하는 방법을 간단하게 명령어로 설명하도록 하겠습니다.

$ npm install -g @vue/cli 

이렇게 작성하시면 자동으로 설치가 완료 됩니다.

그리고 vue 명령어를 사용하실 수 있게됩니다.

예시) vue 버전 확인하기

$ vue --version

기타 다른명령어가 무엇이 있는지 확인

$ vue 

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

이상입니다.

리액트했다가 뷰했다가 환장파티~!