Vue CLI 란?
vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야 되는지 webpack 설정은 어떻게 해야 되는지에 대한 고민을 덜을 수 있습니다.
구조 살펴보기
package.json
{
"name": "project01",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}- name : 프로젝트 이름
- version : 프로젝트 버전
- private : npm과 같이 공용으로 사용할 수 있게 올릴지 말지를 설정하는 key
- script : vue를 실행시 npm run serve 명령어를 통해서 vue를 실행시키는데 내부에서는 script안의 serve 가 실행이 되는 것이다.
- dependencies : 빌드하여 운영을 할 때 가져가야 하는 모듈들을 넣어놓는 객체 -> 설치시 다운된(node_modules에 있음) 모든 모듈을 사용하지는 않기 때문
- devDependencies : 개발을 할때 사용이 되는 모듈들이 들어오게 된다. node_modules에 보면 더 많은 모듈이 있는데 적게 모듈이 입력이 되어 있는 이유는 이 모듈들 또한 만들면서 사용이 되는 모듈들이 있기 때문
- 각각의 모듈들에 사용이 된 모듈들을 보고 싶으면 package-lock.json을 보면 사용된 모든 모듈들을 볼 수 있다.
- browserslist : 전세계의 1%이상의 사용자가 있는 브라우저를 지원한다는 의미이고 최근 2개의 버전을 지원하고 인터넷 익스플로러 11을 지원하지 않는다는 의미
src/main.js
npm run serve라는 명령어를 실행하는 순간 실행이 되는 파일
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
createApp()에 import한 App.vue파일을 넣어주고 mount()로 public폴더 안에 있는 index.html(vue는 이 파일 하나로 움직임)에서 #app(<- id가 app인 html코드를 찾음(id선택자))를 찾아서 여기에다가 마운트를 시킨다. 즉, App.vue의 내용을 index.html의 app이라는 id를 가진 html영역에 넣는다는 의미
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
참고자료
'WEB > Vue.js' 카테고리의 다른 글
| [Vue.js] 이벤트 (0) | 2022.07.10 |
|---|---|
| [Vue.js] 데이터 바인딩 (0) | 2022.07.09 |
| [Vue.js] 라우터 이해하기 (0) | 2022.07.07 |
| [Vue.js] Vue 프로젝트 생성 (0) | 2022.06.28 |
| [Vue.js] Vue.js란? (0) | 2022.06.26 |
댓글