[vue.js] vue3 + vuetify3 세팅 (vue-cil+webpack+vuetify3) , 디렉토리 구성 🌿

이번 블로그 포스트에서는 Vue 프로젝트를 설정할 때 가장 좋은 방법에 대해 공유하고자 합니다.

 

나중에는 Vite나 React로 프로젝트를 진행할 수도 있겠지만, 이번에는 Vue에 초점을 맞추겠습니다.

 

🌿 Project Setting

• vue3
• vuetify3
• packagemanager : yarn
• prettier , eslint
• (webpack)

 

🌿 Project

* 가정: Vue CLI가 글로벌로 설치되어 있다고 가정합니다. (아니면 아래와 같이 설치)

npm install -g @vue/cli
# OR
yarn global add @vue/cli

#https://cli.vuejs.org/guide/installation.html

 

1. Vue CLI를 사용하여 프로젝트 생성하기:

vue create cli_weppack_test

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v5.0.8
✨  Creating project in /Users/vue-template/cli_weppack_test.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 10.20s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 5.82s.

(packageManager 변경하고 싶으면 vue create cli_weppack_test --packageManager [npm/yarn])

(직접세팅하는 옵션을 선택한 모습)

 

2. 프로젝트 디렉토리로 이동하기:

cd cli_webpack_test/

 

3. vuetify3 추가

vue add vuetify

vuetify3 선택

Choose a preset: Vuetify 3 - Vue CLI (preview)

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-vuetify@2.5.8
info All dependencies
├─ interpret@1.4.0
├─ null-loader@4.0.1
├─ rechoir@0.6.2
├─ shelljs@0.8.5
└─ vue-cli-plugin-vuetify@2.5.8
✨  Done in 4.86s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Vuetify 3 - Vue CLI (preview)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 7.41s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

 

4. 디렉토리 구조

tree /Users/~/vue-template/cli_weppack_test -L 2 -I "node_modules"

/Users/~/vue-template/cli_weppack_test

├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── plugins
│   ├── router
│   └── views
├── vue.config.js
└── yarn.lock

8 directories, 10 files

 

🌿 개인적으로 선호하는 프로젝트 구성

다음은 개인적으로 선호하는 프로젝트 구조입니다:

├── Dockerfile (배포를 위한 도커파일)
├── README.md
├── babel.config.js
├── default.conf (ngnix을 위한 설정)
├── develop (k8s를 위한 파일)
│   ├── deploy-adminwebconsole.yaml
│   └── ingress-adminwebconsole.yaml
├── dist (빌드파일들)
│   ├── favicon.ico
│   ├── fonts
│   ├── index.html
│   └── js
├── jsconfig.json
├── package.json
├── public (정적소스)
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue 
│   ├── assets (이미지, 폰트등)
│   ├── components
│   ├── main.js
│   ├── plugins
│   ├── router
│   ├── services (통신관련)
│   ├── store (스토어)
│   ├── utils (자주쓰는 함수,validate 등)
│   └── views
├── vue.config.js
└── yarn.lock

15 directories, 16 files