Language/VueJS 9

npm run serve .... Error

vue 에서 잘 실행하고 있던 vue cli 명령어가 갑자기 아래와 같은 에러를 내며 작동하지 않을 때가 있다. ex) $npm run serve 명령어 수행시 error 'vue-cli-service' is not recognized as an internal or external command 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 위와 같은 에러를 해결 하기 위해서는 아래와 같은 2가지 중 하나의 방법을 수행하면 된다. 당연히 node module 과 vue 는 설치 되어있어야 한다. $ npm install -g vue 1. vue cli 재설치 => 삭제후 재설치하여 해결한다. $ npm uninstall vue-cil..

Language/VueJS 2022.05.19

npm package.json의 종속성을 최신버전으로 업데이트하는 방법

npm이나 yarn으로 패키지를 추가하게 되면 node_modules폴더에 실제 패키지가 설치되면서 package.json파일에 기록을 하게 됩니다. 일반적으로 npm install 패키지명 --save 이런 명령어를 대부분사용할 텐데요. 그럴경우 package.json의 dependencies와 devDependencies에는 "grunt": "^1.0.3" 이런식으로 현재 패키지의 최신 버전이 설치가 됩니다. 이렇게 설치된 package.json 파일에 대해 아무리 명령어로 upgrade를 하더라도 해당 버전보다 높은 버전이 설치되지 않습니다. 만약 하려면 일일이 패키지별로 설치를 따로 해줘야 하는 불편함이 있는데요. 이것을 한방에 업데이트를 시켜주는 패키지가 있습니다. npm-check-update..

Language/VueJS 2021.08.18

Vue out folder 변경

Vue를 Build 하면 Dist라를 폴더에 배포된다. npm run build 하지만 사용하고자 하는 foder가 dist가 아닌경우... 매번 이름을 바꾸거나 고치는것이 불편한다.. 이럴때 다음과 같이 설정하면 편하게 변경된다 [vue.config.js] module.exports = { publicPath: '/', outputDir: 'dist_xx', } 이렇게 변경할 경우, npm run build를 실행하면, 더이상 dist폴더가 생기지 않는다. 대신 dist_xx 폴더에 binary가 생성된다. 흐흐흐,. good?

Language/VueJS 2021.07.07

vuejs WebPack 으로 만들기 ...도전

1. Vue WebPack Project 만들기 webpack - hot-reload, linting, 테스트 및 CSS 추출 기능을 갖춘 대부분의 기능을 갖추고 있는 Webpack + vue-loader 설정입니다. $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 쉘에서 vue init webpack my-project를 입력하면 아래와 같이 설정 인터페이스 화면이 나옵니다. 본인의 프로젝트에 맞게 설정하시면 됩니다. % vue init webpack WD-webpack ? Project name wd-webpack ? Project description A Vue.js pr..

Language/VueJS 2021.04.02

router push with params

$router.push를 통해서 화면 이동시, parameter를 같이 전달 할 필요가 있는 경우 사용 인터넷에서는 컴포넌트의 속성값을 만들고 전달하라고 하는데.. 미리 정의하는것도 쉽지 않고, 인위적으로 $router.push()를 이용하는 경우, 사용이 어렵다. Router를 통한 parameters 전달 방법 1) Path를 통한 값 전달 this.$router.push('/orderexec?status='+value) 위과 같이 전달 가능하고, 여러개의 값을 전달하고 싶은경우, key=value&key=value*key=value... 형태로 추가해 주면 됨. 전달 받은 component에서 parameters 읽는 법. this.$route.query.{key} ex) this.$route.qu..

Language/VueJS 2020.07.07

Vue+Flask - template 만들기

Vuejs를 사용하면서 잘 맞는 middle ware인 Flask를 한번에 프로젝트로 만들어 관리하기.. 1) Vue Project 만들기 https://vuetifyjs.com/en/getting-started/quick-start/ Quick start — Vuetify.js Get started with Vue and Vuetify in no time. Support for Vue CLI, Webpack, Nuxt and more. vuetifyjs.com 여러가지 프로젝트 생성방법 중, vue-cli 를 활용한 방법으로, 위 Quick-start에 잘 나와 있음. $ vue create my-app // navigate to new project directory $ cd my-app vue 설정..

Language/VueJS 2020.04.28