< Vue / Cli >

CLI

Command Line Interface

Vue.js 개발을 위한 시스템. Vue.js에서 공식으로 제공하는 CLI

개발의 필수는 아니지만 거의 필수처럼 사용

Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩 제공

Vue와 관련된 오픈 소스 대부분이 CLI를 통해 구성

@vue/cli 설치

• code

  npm install -g @vue/cli
  vue create my-project

참고 : https://cli.vuejs.org/

NPM

NPM ( Node Package Manager ) - Maven과 유사하다

NodeJS - LTS 버전이용 (다운로드 : https://nodejs.org/ko/)

NPM 검색 사이트 : https://www.npmjs.com/

npm init : 새로운 프로젝트나 패키지를 만들 때 사용(package.json 생성)

npm install package : 생성되는 위치에서만 사용 가능한 패키지 설치

npm install - g package : 글로벌 패키지에 추가. 모든 프로젝트에서 사용 가능.

npm run serve로 구동

npm run build로 배포

1. vscode에 dist 폴더가 만들어짐

2. 폴더 내용을 SpringBoot의 src/main/resources/static에 넣음

3. application.properties에 아래 값 추가

4. context-path는 ' / '로 해야함 바꾸면 다른 모든것을 바꿔야한다.

server.servlet.context-path=/
server.port=8000

주로 사용하는 기능

vue-bootstrap

• 설치 Code

  npm install vue bootstrap bootstrap-vue

• 등록 예시 Code

  import Vue from 'vue'
  import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
  
  // Import Bootstrap an BootstrapVue CSS files (order is important)
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  // Make BootstrapVue available throughout your project
  Vue.use(BootstrapVue)
  // Optionally install the BootstrapVue icon components plugin
  Vue.use(IconsPlugin)

참고 : https://bootstrap-vue.org/docs/components

설치 까먹었을때

vue add plugin_name

SFC

Single File Component

확장자가 .vue인 파일

.vue = template + script + style

구문 강조 가능

컴포넌트에만 CSS의 범위 제한 가능 scoped 이용

전처리기를 이용해 기능의 확장 가능

<template>

기본언어 : html

각 *.vue 파일은 한번에 최대 하나의 <template> 등록 가능

내용은 문자열로 추출되어 컴파일 된 Vue Component의 template 옵션으로 사용

<script>

기본언어 .js

각 *.vue 파일은 한번에 최대 하나의 <script> 블록을 포함할 수 있다.

ES6를 지원. import export 사용가능

<style>

각 *.vue 파일은 여러 개의 <style> 태그 지원

scoped 속성을 이용해 현재 컴포넌트에서만 사용 가능한 CSS 지정 가능!

Uploaded by Notion2Tistory v1.1.0