{
"name": "frontend", //패키지의 이름
"version": "0.1.0", //패키지의 버전
"private": true, // 이 패키지를 공개할건지 비공개할건지 정의
"scripts": { //이 패키지에서 사용할 명령어를 정의
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
이 웹 어플리케이션이 타켓으로 하는 브라우저 정보나 유지보수시 사용해야할 자바스크립트 런타임 환경인 node의 정보를 설정
디렉토리 구조
node_modules : npm install 로 설치한 외부 패키지들이 모여있음
public : 웹팩의 처리를 받지 않고 퍼블리싱되는 정적 자산을 모아놓음, 아이콘과 같은 전처리 과정이 필요없는 파일이 있음
index.html : 어플리케이션의 뼈대가 되는 html
src
assets : 정적 자산을 모아놓음 웹팩의 처리를 받음, 전처리 도구를 사용가능
components : Vue컴포넌트들이 모여있는 폴더
plugins : vue에 설치한 플러그인 패키지를 모아놓음
router : vue router 설정정보, 매핑정보를 담고 있음
views : 라우터에 의해 매핑된 컴포넌트(페이지)를 모아놓음
App.vue : vue의 가장 최상위 컴포넌트
main.js : 가장먼저 실행되는 자바스크립트 파일, vue 인스턴스 생성
npm start 실행순서
package.json > index.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</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>
<div id="app"></div> 에 Vue 컴포넌트들이 마운팅됨
어떻게? main.js 보면 알수있음
main.js
import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
여기서 vue인스턴스를 생성한다. 그리고 app을 정의해 index.html 에 vue 컴포넌트를 마운팅 시키는데