Vue.js(2. CLI, Vetur)

min seung moon·2021년 4월 26일

Vue.js

목록 보기

2/8

1. Vue.js 설치방법 2

01. CLI

Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI(Command Line Interface) (opens new window)를 제공합니다

yarn global add @vue/cli
# 또는
# -g는 전역에서 실행가능하도록 Vue 설치
npm install -g @vue/cli

02. Vue CLI

https://cli.vuejs.org/guide/creating-a-project.html

03. vue create project

vue create vue3-test

vue 3버전을 설치

cd .\vue3-test\
code . -r

04. package.json

{
  "name": "vue3-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // dev와 동일, 개발 서버를 오픈할 때 , npm run serve
    "serve": "vue-cli-service serve",
    // 제품화 과정, npm run build
    "build": "vue-cli-service build",
    // 특정 규칙에 맞게 작성이 되었는지 확인 하는 lint
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  // lint 규칙
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    // lint에 추가적인 규칙을 넣을 수 있음
    "rules": {}
  },
  // 프로젝트가 제공하는 브라우저 종류
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

05. babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

06. Code!?

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>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/app.vue

<!-- HTML -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<!-- JS -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<!-- CSS -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>