📚 Reference

• 공식 문서 1 - Vue
• 공식 문서 2 - Vite
• 참고 자료 1
• 참고 자료 2

📜 Chapter

‣

‣

🔖 Index

프로젝트 생성

1. Vite

• create-vue

  • 설치

    # NPM
    npm init vue@latest
    
    npm init vite -- --template vue-ts my-app
    

    ✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes
    
    Scaffolding project in ./<your-project-name>...
    Done.
    

    > cd <your-project-name>
    > npm install
    > npm run dev
    

2. yarn 1 & Vue & TypeScript

• 설치

# YARN
yarn create vite {프로젝트명} --template vue-ts

# NPM
npm create vite@latest {프로젝트명} -- --template vue-ts

3. yarn berry & Vue & TypeScript

• 참고 자료 1

// root 폴더
yarn --version

yarn set version berry

yarn --version

// 프로젝트 폴더 생성
mkdir app

cd app

// vite 프로젝트 생성
yarn create vite
// Project name: test-project
// Select a framework >> Vue
// Select a variant >> TypeScript

cd test-project
yarn
yarn dev

// yarn.lock 파일 생성
// Linux
touch yarn.lock

// Windows
// fsutil file createnew [파일명.확장자] [파일사이즈]
fsutil file createnew yarn.lock 0

// 설치
yarn

// 실행
yarn dev

• yarn global cache 폴더 위치랑 현재 프로젝트 위치랑 드라이브가 다르면 에러가 발생한다. (yarn cache는 C드라이브로 들어가고 내가 만든 프로젝트는 D드라이브에 있을때 발생)
  • 공식 문서 1
  • 참고 자료 1
  • 에러 발생시 .yarnrc.yml 파일에서 아래 명령어를 추가해야 한다.
  • enableGlobalCahe: false

4. vue-cli