출처 : https://www.youtube.com/watch?v=PnJwnf1Bdis&list=PLjh-ViK0OwrIrmJ1y6ElTDrPOE6HryH6F
* tailwind 시작 전 먼저 create vue 설치 시 미리 설치하는 부분 존재
(입력) vue create .
(질문) Generate project in
current directory? (Y/n) (입력) y
Default ([Vue 3]
babel, eslint)
Default ([Vue 2]
babel, eslint)
Manually select
features
화살표 방향으로 맨 아래(Manually Select features)로 오고 엔터 누르기
Babel, Router, Vuex, Linter / Formatter 별표(*) 표시
(질문)
( ) Babel //이미 별표 설정됨
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router //스페이스바 누르기
( ) Vuex //스페이스 바 + 엔터 누르기
( ) CSS Pre-processors
( ) Linter / Formatter //이미 별표 설정됨
( ) Unit Testing
( ) E2E Testing
(질문)
Choose a version of
Vue.js that you want to
start the project with
(Use arrow keys)
3.x //엔터 누르기
2.
(질문) Use history mode for
router? (Requires proper server setup for index
fallback in production)
(Y/n) y (입력)
(질문)
Pick a linter /
formatter config: (Use
arrow keys)
ESLint with error
prevention only
ESLint + Airbnb config
ESLint + Standard
config
ESLint + Prettier //엔터 누르기
Pick additional lint
features: (Press to select, to toggle all, to
invert selection, and
to proceed)
(*) Lint on save //엔터 누르기
( ) Lint and fix on
commit
(질문) Where do you prefer
placing config for
Babel, ESLint, etc.?
(Use arrow keys)
In dedicated config files //엔터 누르기
In package.json
(질문) Save this as a preset for future projects?
(y/N) n (입력)
* tailwind 설치 시 최신 버전
(출처 : https://tailwindcss.com/docs/installation/using-postcss) 설치 시 원래 결과가 나오지 않아 고정된 버전으로 설치함
[홈페이지 버전] npm install -D tailwindcss postcss autoprefixer
1. tailwind 설치하기
[내가 설치한 버전] npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
2. tailwind.config, postcss.config 자동 생성
npx tailwindcss init
3. src/App.vue
<template>
<router-view />
</template>4. src/views/HomeView.vue
<template>
<main>
<p class="text-red-900">hello</p>
<p class="text-green-900">hello</p>
</main>
</template>
5. src/assets/css/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;6. src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/assets/css/styles.css";
createApp(App).use(store).use(router).mount("#app");
7. 결과
오류가 나는 경우
오류 문장
In order to automatically fix your code, you need to run ESLint with the --fix flag.
해결책
npm run lint -- --fix
오류 나는 경우 2
3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the--fixoption.
해결책(prettier 자동 정렬)
Windows : Shift + Alt + F.
MAC : Shift + Option + F.
Linux : Ctrl + Shift + I.오류 나는 경우 3
▶ 새로운 컴포넌트, 혹은 작업을 할 때마다 계속 아래의 부분이 빨강색으로 뜰 때
▶ prettier을 자동 혹은 수동으로 하게 설정
errors and 0 warnings potentially fixable with the
--fixoption.
해결책
[vs code window 기준]
-
상단의 메뉴 바의 파일(F) > 기본설정 > 설정
(단축키 : ctrl +,) -
검색창에 "format on save" 치기
-
해당부분이 체크박스가 되어있지 않으면 표시하기
[기본 설정을 prettier로 지정하기]
-
검색창에 "default formatter" 치기
-
맨 아래 "setting.json에서 편집" 누르기
-
아래처럼 설정하기
-
vue에서 컴포넌트, 코드 작성 후 ctrl + alt + F(window 기준) 누르고 코드 실행하면 됨
"editor.defaultFormatter": "esbenp.prettier-vscode"
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
