Front/Vue.js

[Vue] vs code에서 절대경로, 상대경로 설정

code.visualstudio.com/docs/languages/jsconfig jsconfig.json Reference View the reference for jsconfig.json. code.visualstudio.com jsconfig.json을 생성 (vscode에서만 사용가능) { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 위와 같이 설정하고 나면 // import Demo from '../../demo/basic/Demo' // 너무 번거로움 import Demo from '@/demo/basi..

2021. 2. 1. 14:43

Front/Vue.js

[Vue.js] 2. 프로젝트 구조 설명 / Es Lint 에러 확인

rules: { // test code // "no-console": "error", "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "prettier/prettier": [ 'error', // 아래 규칙은 개인 선호에 따라 prettier문법을 적용 // https://prettier.io/docs/en/options.html { singleQuote: true, // '' semi: true, useTabs: false, tabWidth: 2, trailingComma: 'all', printWid..

2021. 2. 1. 14:15

Front/Vue.js

[Vue.js + Atom] 필요 패키지

atom-beautify code 정렬 autoclose-html 시작 태그를 여는 순간 자동으로 닫는 태그 생성 highlight-selected 코드에서 동일한 텍스트를 강조, 같은 변수나 함수를 쫓아갈 때 유용한 플러그인 color-picker 에디팅 툴에서 바로 원하는 색을 선택하면, rgb 값을 얻을 수 있다. javascript-snippets fun + tab : function의 뼈대 자동 생성 cl + tab : console.log 자동 생성 for + tab : for 문 자동 완성 language-vue vue의 개발 생산성을 도와주는 플러그인 tem + tab platformio-ide-terminal 아톰 내부에서 터미널을 설치하여 사용할 수 있음

2021. 2. 1. 11:57

Front/Vue.js

[Vue.js] 1. 프로젝트 생성

1. vue cli 설치 cli.vuejs.org/ Vue CLI cli.vuejs.org npm install -g @vue/cli 2. vue --version 버젼 확인 3. vue create 앱이름 프리셋 : 플러그인의 집합 Manually select features를 선택 Babel, LInter, Unit Testing을 선택 (Router, Vuex를 선택해도 된다.) 2버젼으로 선택 ESLint와 프리티어 선택 Lint on save로 선택 단위테스트를 작성하기 위해서 Jest로 선택 프로젝트 도구의 설정을 Package.json으로 넣을 수도 있고, dedicated config files로 넣을 수도 있음. dedicated config files를 선택 n을 선택 vue creat..

2021. 2. 1. 11:37