[Vue] Vue 설치 및 ElementPlus and BootStarap and Axios install

 

 

1. 일단은 Node.js 를 설치해야한다 .

깔끔하게 LTS 버전으로 사용해서 다운로드 받는다.

 

https://nodejs.org/ko

Node.js

 

 

2. vue 공식 문서 https://vuejs.org/ 에서 install 버튼 클릭

https://vuejs.org/guide/quick-start.html

Quick Start | Vue.js

npm init vue@latest

 

3. npm run dev 실행하면 vue 실행완료

npm run dev

 

 

 

ElementPlus- plus 설치하기

1. 필요한 라이브러리 세팅해주기.

     (ELPLUS , Bootstarp)

 npm install element-plus --save

 npm i bootstrap@5.3.1

npm으로 성공적으로 설치가 완료되면 

https://element-plus.org/en-US/guide/quickstart.html#full-import

Quick Start | Element Plus

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

// @ts-ignore
import App from './App.vue'
import router from './router'

// ElPLust 라이브러리 세팅
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 부트스트랩
import "bootstrap/dist/css/bootstrap-utilities.css"

const app = createApp(App)

app.use(createPinia())
app.use(router)

// ElPLust 라이브러리 세팅
app.use(ElementPlus)

app.mount('#app')

 

<script setup lang="ts">
import {ref} from "vue";

// axtios 라이브러리 import
import axios from "axios";

const content = ref("")
const title = ref("")

// axtios 가장 기초단계
const write = function () {
  axios.post("http://localhost:8080/posts", {
    title : title.value,
    content: content.value
  })
}
</script>

<template>
  <div>
  <el-input v-model="title" type="text" placeholder="제목을 입력해주세요" />
  </div>

  <div class="mt-2">
  <el-input v-model="content" type="textarea" rows="15"></el-input>
  </div>

  <div class="mt-2">
  <el-button type="primary" @Click="write()">글 작성완료</el-button>
  </div>

</template>

<style>

</style>

 

+++ 별첨

 

JAVA host 연결하기

 

package com.www.blog.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000");
    }
}