[vuetify3] Vite 또는 Vue Cli 버전 설치

vuetify3 설치

참고 : https://v15.vuetifyjs.com/ko/getting-started/quick-start/

난 이미 vue-cli를 설치해뒀음 여기서부터 하면 될듯

 

#1 vue add vuetify

오류 생김..

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\Baek\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ vue add vuetify
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

 

원인 및 해결 방법 :

오류 메시지 "이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\Baek\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다."는 PowerShell의 실행 정책으로 인해 스크립트 실행이 차단되는 경우에 발생합니다. 이는 시스템 보안을 위해 PowerShell에서 스크립트 실행을 제한하는 설정 때문입니다.

### 오류 원인 및 해결책
PowerShell에서 스크립트 실행이 제한되는 경우, 실행 정책을 변경하여 스크립트를 허용할 수 있습니다. 이는 개발 작업을 수행할 때 발생할 수 있는 일반적인 문제입니다.

#### 실행 정책 변경
PowerShell 실행 정책을 "RemoteSigned" 또는 "Bypass"로 변경하면 스크립트를 실행할 수 있습니다. "RemoteSigned"는 로컬 스크립트는 허용하고, 원격 스크립트는 서명이 필요합니다."Bypass"는 모든 스크립트 실행을 허용합니다.

```powershell

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

```

이 명령어는 현재 사용자 범위에서 실행 정책을 "RemoteSigned"로 변경합니다. 실행 정책을 변경할 때는 관리자 권한이 필요할 수 있으며, 변경 사항이 시스템 보안에 영향을 줄 수 있으므로 신중해야 합니다.

---

실행 정책 변경

commit 안된 파일들 commit을 권장하길래 y 썼다가 n하고 커밋하고 다시해줬다.

 

Vite로 진행

#2 vue add vuetify 버전선택

Vuetify 3로 하자고는 얘기했는데 Vite와 Vue CLI로 또 나눠진다. Vue CLI가 공식도구이긴 하지만 회사에서는 Vite를 쓰기도 하고 dev 서버를 키는 속도가 빠르다고 해서 Vite를 사용해보기로 한다.

 

참고 : https://cloudless.blog/post/vue-cli%EC%97%90%EC%84%9C-vite%EB%A1%9C-%EC%98%AE%EA%B8%B4-%ED%9B%84%EA%B8%B0

Vue-CLI에서 Vite로 옮긴 후기

이 메시지는 Vuetify 3의 야간 빌드(nightly build)를 설치할지 묻는 질문입니다. 야간 빌드는 개발 중인 최신 버전을 의미하며, 정식 출시 전에 개발자들이 테스트하거나 기능을 시험해볼 때 사용됩니다.

메시지의 의미

• Nightly Build: 야간 빌드는 공식적으로 배포되기 전의 개발 중인 버전입니다. 이 빌드에는 새로운 기능이나 수정 사항이 포함될 수 있지만, 안정성이나 버그에 대한 보증이 없습니다.
• 개발 테스트용: 야간 빌드는 주로 개발자들이 테스트하거나 기능을 미리 확인하기 위해 사용합니다. 일반적인 사용에는 안정성이 떨어질 수 있습니다.

경고

이 메시지는 야간 빌드가 안정적이지 않을 수 있으며, 개발 테스트를 위한 것임을 경고합니다. 따라서, 이 버전을 설치하면 예상치 못한 버그나 문제가 발생할 수 있습니다.

#3 vite 설치하고 결국 branch를 나눴음, 그리고 npm run serve로 켰더니 8080에서 4173으로 포트가 바뀌고 /를 get할 수 없다고 뜸, npm run dev 명령어를 쓰니까 됐음

 

포트는 --port로 변경 가능  :  npm run serve -- --port 8080

 

원인 : 접은글 참고

Vite 기반 프로젝트에서는 개발 서버를 실행하기 위해 `npm run dev`를 사용하는 것이 일반적입니다.

`package.json`의 `scripts` 섹션에서 `dev` 스크립트가 Vite 개발 서버를 실행하도록 설정되어 있는지 확인

dev가 vite를 실행

Vite를 사용한 Vue 프로젝트에서 `npm run serve`로 개발 서버를 실행할 때 오류가 발생하는 일반적인 이유는 `package.json`의 스크립트 구성과 관련이 있습니다. Vite 기반 프로젝트에서는 개발 서버를 실행하기 위해 `npm run dev`를 사용하는 것이 일반적입니다.

### 일반적인 문제 원인
- **스크립트 정의**: `package.json`의 `scripts` 섹션에서 `serve` 스크립트가 Vite의 개발 서버를 실행하도록 설정되어 있지 않을 수 있습니다. Vite 프로젝트에서는 일반적으로 `dev` 스크립트를 사용하여 개발 서버를 실행합니다.
- **혼동된 명령어**: `serve`는 Vue CLI 또는 다른 빌드 도구에서 개발 서버를 실행하기 위해 사용되는 일반적인 명령어입니다. Vite 프로젝트에서 `serve` 스크립트가 잘못 정의되었거나 다른 용도로 사용되는 경우, 오류가 발생할 수 있습니다.

### 해결 방법
`package.json`에서 `scripts` 섹션을 확인하고, Vite 개발 서버를 실행하기 위해 `npm run dev`를 사용하도록 설정되어 있는지 확인하세요.

1. **`package.json` 확인**: `package.json`의 `scripts` 섹션에서 `dev` 스크립트가 Vite 개발 서버를 실행하도록 설정되어 있는지 확인합니다.

   ```json
   {
     "scripts": {
       "dev": "vite",  // Vite 개발 서버 실행
       "build": "vite build",
       "serve": "vite preview"  // Vite 빌드 후 미리보기 실행
     }
   }
   ```

   이 예시에서 `dev`는 Vite 개발 서버를 실행하고, `serve`는 빌드된 프로젝트를 미리보기로 실행합니다. `serve`는 Vite의 미리보기(배포 전 시연) 용도로 사용되며, 개발 서버를 실행하는 데는 `dev` 스크립트를 사용해야 합니다.

2. **개발 서버 실행**: `npm run dev` 명령어를 사용하여 Vite 개발 서버를 실행합니다. 이렇게 하면 Vite의 개발 모드에서 프로젝트를 실행할 수 있습니다.

3. **포트 지정**: Vite 개발 서버를 특정 포트에서 실행하려면, `vite.config.js`에서 포트를 지정하거나 `npm run dev -- --port 8080`과 같은 명령어를 사용하여 포트를 직접 지정할 수 있습니다.

### 요약
Vite 프로젝트에서 개발 서버를 실행하기 위해서는 `npm run dev`를 사용합니다. `npm run serve`는 Vite에서 빌드된 프로젝트를 미리보기로 실행하는 데 사용되며, 개발 서버를 실행하는 용도로는 사용되지 않습니다. `package.json`에서 `scripts` 섹션을 확인하고, Vite 개발 서버를 실행하는 데 올바른 스크립트를 사용하세요.

 

 

---

Vue CLI로 진행

#2 vue add vuetify 버전선택

설치만 하면 기본 세팅은 다 해주나보다.

그래서 vite로 킨거에서 기본 사라지고 이렇게만 뜬 것 같음

이렇게 해주니까 

<!-- vuecli's App.vue -->
<template>
  <v-app>
    <v-main>
      <nav>
        <router-link to="/">TimeGame</router-link> |
        <router-link to="/search">Search</router-link> |
        <router-link to="/factorialSetup">Factorial2</router-link>
      </nav>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
}
</script>

이렇게 뜨긴 한다. 이제 디자인 적용하면 될듯! 참고 :  https://vuetifyjs.com/en/components/app-bars/#usage