[Vue.js] 웹팩(webpack)으로 빌드하기 [npm 활용하여 모듈 가져오기]
·
◎ JavaScript/Vue.js🔰
- 웹팩(webpack)으로 빌드하기 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npm으로 모듈 설치하기 #npm 초기화 npm init #vue 설치 npm install vue #개발자모드로 webpack, webpack-cli 설치 npm i webpack webpack-cli -D 3. webpack.config.js 세팅 const path = require('path'); module.exports = { entry: { app: path.join(__dirname, 'main.js') }, module: { rules: [{ }] }, plu..
[Vue.js] 뷰(Vue.js) 활용하여 끝말잇기 만들기 [구구단 코드 응용하여 구현]
·
◎ JavaScript/Vue.js🔰
- 뷰(Vue.js) 활용하여 끝말잇기 만들기 {{word}} 입력! {{result}} - 결과물 HTML 삽입 미리보기할 수 없는 소스 - 참고자료 [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com
[Error Note] Error: Cannot find module 'vue-loader/lib/plugin' 해결방법
·
◈ Study/에러노트(Error Note)🧱
- Error: Cannot find module 'vue-loader/lib/plugin' npm으로 vue-loader를 설치하고 빌드하는 중 에러가 발생하였다. - Error: Cannot find module 'vue-loader/lib/plugin' 해결방법 VueLoaderPlugin을 import 하는 방식이 바뀌었기 때문이였다. 구버전 코드가 아닌 신버전 코드로 바꿔주면 된다. // 구버전 Cannot find module 'vue-loader/lib/plugin' // 신버전 const { VueLoaderPlugin } = require('vue-loader') - 참고자료 Webpack : Cannot find module 'vue-loader/lib/plugin' 문제 : Canno..
[Vue.js] 뷰(Vue.js) 활용하여 구구단 만들기 [ref로 input 태그 focus 해주기]
·
◎ JavaScript/Vue.js🔰
- 뷰(Vue.js) 활용하여 구구단 만들기 {{first}}곱하기 {{second}}는? 입력 {{result}} - 결과물 HTML 삽입 미리보기할 수 없는 소스 - 참고자료 [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com
[꿀팁] VSC에 Vue.js 문법 색깔 넣기 [Visual Studio Code Vue.js highlighter]
·
◐ 기타/알아두면 좋은 팁(tip)✨
- VSC에 Vue.js 문법 색깔 넣기 VSC로 Vue.js를 처음 쓰게 된다면, Vue.js 문법을 인식시킬 툴을 설치해야 한다. → 설치 안하면 아래처럼 흰 글씨로만 보이게 된다. - 참고자료 [IDE] Visual Studio Code Vue.js highlighter : vue.js 문법 색깔 넣기 vue 프로젝트 생성 후 .vue 파일이 아래 이미지와 같이 온통 하얀색으로 표시된다면 marketplace 에서 vetur extension plugin을 설치하여 highlighter 를 적용해줄 수 있다. (보통 우측 하단에 친절하게 vetur 확 developyo.tistory.com