vuetify2

뷰티파이2는 이미 서비스가 끝나서 뷰티파이3나 퀘이사를 공부해야하지만

뷰티파이 강좌가 2버젼이라서 한번 사용해보기로 함

 

 

-------------------

vue2 (vutify2)

뷰티파이2 사이트
https://v2.vuetifyjs.com/en/

mdi아이콘
https://pictogrammers.com/library/mdi/

샘플이미지무료 사이트
https://pixabay.com/ko/

인프런 강좌(무료) : Vuetify Admin Template 만들기 - 기본편 (Based Vue2) 짐코딩
https://www.inflearn.com/course/lecture?courseSlug=%EB%B7%B0%ED%8B%B0%ED%8C%8C%EC%9D%B4-%EC%96%B4%EB%93%9C%EB%AF%BC-%ED%85%9C%ED%94%8C%EB%A6%BF-1&unitId=79489

######섹션1. 프로젝트생성>프로젝트생성######

1. vuecli 검색
2. https://cli.vuejs.org/ 사이트 접속(get start>installation)
---------------
3. 커멘드창에서 npm install -g @vue/cli (글로벌로 뷰의 cli를 설치한다)
4. vue --version 을 눌러서 설치된 버젼을 확인한다
내컴퓨터 버전 => @vue/cli 5.0.8
5. 작업할려는 위치로 폴더를 열어서  (!!! 파워셀로 커멘드창 열면 보안에러떠서 깃배시에서 할것)
커멘드창에서 vue create vuetify-admin-template
vue2 를 선택
6. npm run serve (화면 서버주소)
7. npm i -S vue-router (라우터 설치) 이렇게 설치하면 안된다 최신버젼으로 깔리기때문에
여기서 쓰는건 버젼 2니깐 2로설치하기
npm install vue-router@2

8. Dashboard.vue파일을 만들었더니 에러난다 =>DashBoard.vue이렇게 바꿨음
(이름을 다른 요소와 겹치지않도록 여러단어의 조합으로 만들어야함)
9. src> router>index.js파일만들기
import Vue from 'vue'
import VueRouter from 'vue-router'

10. router임포트할려니깐
router is defined but never used 에러뜨면
vue.config.js 파일에 아래 내용 추가
devServer: {
    client: {
      overlay: false
    }
  }

11. 뷰티파이설치 지금은 버전3이나온 상태라 코맨드창에 버전 2를 설치해야한다
https://v2.vuetifyjs.com/en/
vue add vuetify 
y쓰고
default선택하라고 영상에 되어있는데 디폴트가 없다ㅠ
? Choose a preset:
> Vuetify 2 - Configure Vue CLI (advanced)
  Vuetify 2 - Vue CLI (recommended)
  Vuetify 2 - Prototype (rapid development)
  Vuetify 3 - Vite (preview)
  Vuetify 3 - Vue CLI (preview)
여기서 느낌으로 그냥 리코멘드를 선택했다 Vuetify 2 - Vue CLI (recommended)
에러가난다 아니 왜 계속 에러나ㅠ 고통스럽다
HomeView.vue 이름으로 하면안된단다. 그래서 이걸 끄는 작업이 필요하다
package.json에

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": 0
    }    
  },

룰스 안쪽에 이걸 추가해주면된다
"vue/multi-word-component-names": 0

12. 
https://v2.vuetifyjs.com/en/
UI Components에 navigation

<v-list-item
          v-for="item in items"
          :key="item.title"
          link
          :to="item.to" 
        >
 :to="item.to" 이건 링크 연결 시키겠다라는 뜻 이거추가


######섹션1. 프로젝트생성>프로젝트설정######
1.
editorconfig 플러그인 설치(에디톨콘피그) editorconfig for VS Code
루트 디렉토리에 .editorconfig 파일 하나생성해서 그안에
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

들여쓰기 2칸
앞에 공백제거
파일저장할때 파일에 끝은 새로운줄로 저장
https://editorconfig.org/ 여기안에 자세한 옵션에 대한 설명이 들어있다

2.
npm install eslint-plugin-vuetify --save-dev
아 또 에러난다 오마갓
아래와같이 입력한다 (npm install 명령에 --legacy-peer-deps 옵션을 추가하여 의존성 충돌을 무시하고 설치할 수 있다)
npm install eslint-plugin-vuetify --save-dev --legacy-peer-deps


루트에 eslintrc.js 파일을 만들어서
https://github.com/vuetifyjs/eslint-plugin-vuetify 여기에 내용이 들어가있다

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/base',
    'plugin:vuetify/base'
  ]
}

3.
eslint플러그인설치 
ctrl+shift+p
open settings를 입력한다
settings.json 파일에
 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
또 에러난다 오마갓 아래와같이 입력해서 저장함
 "editor.codeActionsOnSave": {
        "editor.formatOnSave": "always",
        "source.organizeImports": "always",
        "source.sortImports": "always",
        "source.fixAll": "always"
      }

######섹션2. 그리드시스템>그리드시스템 2탄######
1.
https://v2.vuetifyjs.com/en/
toolbar검색

2.
v-container
v-row  (줄)
v-col (열)
v-spacer

v-row  안에  v-col(칸이 들어간다)

감싸는 v-row에 줘야한다!!!
거터사이즈는 기본사이즈가 24픽셀
dense 8픽셀
no-gutters는 안에 간격이 없는거
pa-3 (3열)
align="end" 정렬 아래로


<v-container class="red" fluid> fluid는 100% 꽉차게하는거임

예전 문법 쓰지 않도록 막는거 eslintrc.js파일에 하단추가
rules: {
    'vutify/no-deprecated-classes': 'error',
    'vutify/no=legacy-grid': 'error'
  }

인라인으로 줄려면
:style="{height: '120px'}" 이런식으로 가능

######섹션2. 그리드시스템>그리드시스템 3탄######

GridListPage is defined but never used
파일만들어서 임포트 시키니깐 계속 에러가난다 밑에 라우터쪽도 쓰여야지 에러가 안난다


콜스 속성(최대12개의 컬럼)
v-for="count in 12" //같은 박스를 12개를 보여주겠다

<v-col cols="12"> =>칸이 한개
<v-col cols="6"> => 칸이 두개
<v-col cols="3"> => 칸이 네개
 cols="auto" 안에 들어간 텍스트만큼의 넒이를 가지는거

반응형할때는 이런식으로  숫자 넣어주면됨
xs="6"
sm
md
lg
xl

<v-row justify="center"> 정렬하는거



######섹션 3. Vuetify 학습>Layouts######
<v-app>은 제일 바깥에 =>소스 봤을때는 <div id="app">이런식으로 보여짐
<v-app-bar v-if="$vuetify.breakpoint.xsOnly" app />//모바일모드에서만 보이기
<v-navigation-drawer" app />
 app을 추가해서 적어줘야하다 서로 연동되기떄문에 간격이라던가

######섹션 3. Vuetify 학습>Breakpoints######
레이어팝업이 웹일떄는 작은사이즈 모바일일때는 풀로 뜨게

######섹션 3. Vuetify 학습>Typography ######
Typography는 헤딩테그
<p class="text-h1">
<p class="text-h2 text-sm-subtitle-1"> 사이즈가 sm일때는 서브타이틀로 바꿔라
<p class="font-weight-black"> 폰트 굵기
<p class="text-right text-sm-left">오른쪽 정렬 /사이즈가 sm일때는 왼쪽 정렬

######섹션 3. Vuetify 학습>colors ######
<v-card class="primary lighten-1 darken-1"> 기본 배경색// lighten-1 색상연하기 //  darken-1 색상진하게
<v-card class="primary--text"> 기본 폰트 색상

기본색상 변경하고 싶으면
공식페이지에서 preset  검색해서 디폴트값들을변경하면된다


######섹션 3. Vuetify 학습>Helper Class ######
pa-3 (12px) 전체패딩
pb-4 (16px) 패딩바틈
d-none (디스플레이난)
<v-card class="d-none d-sm-block"> 안보이다가 sm사이즈에서는 보이게
그외에 박스셰도우, 플렉스, 플로트에 관한것도 있음

######섹션 3. Vuetify 학습>마무리 ######
<p :src="require('@/assets/sidebar.jpg')">
=>백그라운드
대쉬보드(그래프는) 검색을 sparklines