[vue.js] vue-echarts 설치

Language/Vue.js|2021. 8. 21. 15:27

설치방법

​yarn add echarts vue-echarts

 

오류 발생하여 아래 내용을 추가함

 

yarn add @vue/composition-api

댓글()

[vue.js] 서비스 포트 변경

Language/Vue.js|2021. 8. 20. 12:56

[vue.js] 서비스 포트 변경

Vue.js 를 시작하면 8080 포트로 서비스가 시작 됩니다. 8080 말고 다른 포트를 변경하고 싶을때는 package.json 파일을 아래와 같이 수정합니다.

  • --port 8077 : 포트를 8077로 변경했습니다.
{ ​​"name": "tistory", ​​"version": "0.1.0", ​​"private": true, ​​"scripts": { ​​​​"serve": "vue-cli-service serve --port 8077", ​​​​"build": "vue-cli-service build", ​​​​"lint": "vue-cli-service lint" ​​}, ​​"dependencies": { ​​​​"@fortawesome/fontawesome-free": "^5.15.4", ​​​​"axios": "^0.21.1", ​​​​"core-js": "^3.6.5", ​​​​"element-ui": "^2.15.5", ​​​​"vue": "^2.6.11", ​​​​"vue-clipboard2": "^0.3.1", ​​​​"vue-router": "^3.5.2" ​​}, ​​"devDependencies": { ​​​​"@vue/cli-plugin-babel": "~4.5.0", ​​​​"@vue/cli-plugin-eslint": "~4.5.0", ​​​​"@vue/cli-service": "~4.5.0", ​​​​"babel-eslint": "^10.1.0", ​​​​"eslint": "^6.7.2", ​​​​"eslint-plugin-vue": "^6.2.2", ​​​​"vue-template-compiler": "^2.6.11" ​​}, ​​"eslintConfig": { ​​​​"root": true, ​​​​"env": { ​​​​​​"node": true ​​​​}, ​​​​"extends": [ ​​​​​​"plugin:vue/essential", ​​​​​​"eslint:recommended" ​​​​], ​​​​"parserOptions": { ​​​​​​"parser": "babel-eslint" ​​​​}, ​​​​"rules": {} ​​}, ​​"browserslist": [ ​​​​"> 1%", ​​​​"last 2 versions", ​​​​"not dead" ​​] }

 

댓글()

[vue.js] Font Awesome 색상 사이즈 변경방법

Language/Vue.js|2021. 8. 20. 08:40

vue.js 기반 환경에서 폰트어썸 설정하는 방법은 아래 내용을 참고하세요.  

2021.08.19 - [Language/Vue.js] - vuejs에 폰트어썸 사용

 

vuejs에 폰트어썸 사용

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마

goodsaem.tistory.com

폰트어썸은 svg vector 를 이용하므로 아이콘의 색상 및 사이즈 변경이 가능합니다.

 

소스코드

<template> ​​<div> ​​​​<ul> ​​​​​​<li> ​​​​​​​​아이콘을 출력해 봅니다. <i class="fa fa-bus"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘의 색상을 변경해 봅니다. <i class="fa fa-bus" style="color:blue"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘의 크기를 변경해 봅니다. ​​​​​​​​<i class="fa fa-bus"></i> ​​​​​​​​<i class="fa fa-bus fa-lg"></i> ​​​​​​​​<i class="fa fa-bus fa-2x"></i> ​​​​​​​​<i class="fa fa-bus fa-3x"></i> ​​​​​​​​<i class="fa fa-bus fa-4x"></i> ​​​​​​​​<i class="fa fa-bus fa-5x"></i> ​​​​​​​​<i class="fa fa-bus fa-6x"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘의 테두리를 적용합니다. <i class="fa fa-bus fa-border"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘의 방향을 변경합니다. ​​​​​​​​<i class="fa fa-bus"></i> ​​​​​​​​<i class="fa fa-bus fa-rotate-90"></i> ​​​​​​​​<i class="fa fa-bus fa-rotate-90"></i> ​​​​​​​​<i class="fa fa-bus fa-rotate-180"></i> ​​​​​​​​<i class="fa fa-bus fa-rotate-270"></i> ​​​​​​​​<i class="fa fa-bus fa-flip-horizontal"></i> ​​​​​​​​<i class="fa fa-bus fa-flip-vertical"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘을 회전합니다. ​​​​​​​​<i class="fa fa-bus fa-spin fa-lg"></i> ​​​​​​</li> ​​​​​​<li> ​​​​​​​​아이콘을 중첩합니다. ​​​​​​​​<span class="fa-stack fa-lg"> ​​​​​​​​<i class="fa fa-circle fa-stack-2x"></i> ​​​​​​​​<i class="fa fa-bus fa-stack-1x fa-inverse"></i> ​​​​​​​​</span> ​​​​​​</li> ​​​​</ul> ​​</div> </template> <script> export default { ​​name: "FontAwesome2" } </script> <style> li { ​​text-align: left; } </style>

실행결과

댓글()

[vue.js] 프로젝트에 axios 적용하기

Language/Vue.js|2021. 8. 19. 13:44

소개

Axios는 브라우저 및 node.js를 위한 간단한 비동기 통신 HTTP 클라이언트입니다. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공합니다.

 

브라우저에 내장되어 있는 fetch 와 비교한 표입니다.

axios vs fetch 

Axios Fetch
요청 객체에 url이 있습니다. 요청 객체에 url이 없습니다.
써드파티 라이브러리로 설치가 필요합니다. 현대 브라우저에 기본 탑재되어 별도  설치가 필요 없습니다.
XSRF(크로사 사이트 위조) 보호 기능이 있습니다. 별도 보호 기능이 없습니다.
data 속성을 사용합니다. body 속성을 사용합니다.
data는 object를 포함 합니다. body는 문자열화 되어있습니다.
status가 200이고 statusText가 ‘OK’이면 성공 입니다. 응답객체가 ok 속성을 포함하면 성공 입니다.
자동으로 JSON데이터 형식으로 변환됩니다. .json()메서드를 사용해야 합니다.
요청을 취소할 수 있고 타임아웃을 걸 수 있습니다. 해당 기능 존재 하지않습니다.
HTTP 요청을 가로챌수 있습니다. 기본적으로 제공하지 않습니다.
download진행에 대해 기본적인 지원을 합니다. 지원하지 않습니다.
많은 브라우저를 지원합니다. Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원합니다.

axios가 좀더 많은 기능을 제공해 줍니다. 그래서 인지 가장 많이 사용합니다.

 

설치

yarn add axios

main.js  파일 수정

import Vue from 'vue' import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from './router' import '@fortawesome/fontawesome-free/js/all.js' import axios from "axios"; import App from './App.vue' Vue.prototype.$axios = axios; Vue.config.productionTip = false Vue.use(Element, { size: 'small', zIndex: 3000 }); new Vue({ ​​router, ​​render: h => h(App), }).$mount('#app')

예제 (행정코드)

법정 행정 코드를 다운로드 받아서 csv 파일을 만들고 이를 axios로 불러와서 행정동을 선택하는 예제를 만들어 보겠습니다. 

 

components/LawCode.vue 파일을  생성하고 아래와 같이 코딩합니다.

<template> ​​<div> ​​​​<el-row style="width:800px"> ​​​​​​<el-col :span="6"> ​​​​​​​​<el-select v-model="cate1" @change="chgCate1" placeholder="시/도"> ​​​​​​​​​​<el-option ​​​​​​​​​​​​​​v-for="item in options" ​​​​​​​​​​​​​​:key="item.value" ​​​​​​​​​​​​​​:label="item.label" ​​​​​​​​​​​​​​:value="item.value" ​​​​​​​​​​​​​​:disabled="item.disabled"> ​​​​​​​​​​</el-option> ​​​​​​​​</el-select> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<el-select v-model="cate2" @change="chgCate2" placeholder="시/군/구"> ​​​​​​​​​​<el-option ​​​​​​​​​​​​​​v-for="item in options2" ​​​​​​​​​​​​​​:key="item.value" ​​​​​​​​​​​​​​:label="item.label" ​​​​​​​​​​​​​​:value="item.value" ​​​​​​​​​​​​​​:disabled="item.disabled"> ​​​​​​​​​​</el-option> ​​​​​​​​</el-select> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<el-select v-model="cate3" @change="chgCate3" placeholder="읍/면/동"> ​​​​​​​​​​<el-option ​​​​​​​​​​​​​​v-for="item in options3" ​​​​​​​​​​​​​​:key="item.value" ​​​​​​​​​​​​​​:label="item.label" ​​​​​​​​​​​​​​:value="item.value" ​​​​​​​​​​​​​​:disabled="item.disabled"> ​​​​​​​​​​</el-option> ​​​​​​​​</el-select> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<el-select v-model="cate4" @change="chgCate4" placeholder="리"> ​​​​​​​​​​<el-option ​​​​​​​​​​​​​​v-for="item in options4" ​​​​​​​​​​​​​​:key="item.value" ​​​​​​​​​​​​​​:label="item.label" ​​​​​​​​​​​​​​:value="item.value" ​​​​​​​​​​​​​​:disabled="item.disabled"> ​​​​​​​​​​</el-option> ​​​​​​​​</el-select> ​​​​​​</el-col> ​​​​</el-row> ​​</div> </template> <script> const URL = "https://onehit9.github.io/"; export default { ​​name: "LawCode", ​​created() { ​​​​this.getData(); ​​}, ​​data() { ​​​​return { ​​​​​​rows: [], ​​​​​​options: [], ​​​​​​options2: [], ​​​​​​options3: [], ​​​​​​options4: [], ​​​​​​cate1: "", ​​​​​​cate2: "", ​​​​​​cate3: "", ​​​​​​cate4: "", ​​​​​​lastCate: "", ​​​​} ​​}, ​​methods: { ​​​​resetCate(level) { ​​​​​​if (level < 3) { ​​​​​​​​this.cate2 = ""; ​​​​​​​​this.options2 = []; ​​​​​​} ​​​​​​if (level < 4) { ​​​​​​​​this.cate3 = ""; ​​​​​​​​this.options3 = []; ​​​​​​} ​​​​​​if (level < 5) { ​​​​​​​​this.cate4 = ""; ​​​​​​​​this.options4 = []; ​​​​​​} ​​​​}, ​​​​chgCate(cateNm,idx) { ​​​​​​this.resetCate(idx - 1); ​​​​​​let options = []; ​​​​​​let cate = this.rows.filter( ​​​​​​​​​​row => row.split(",")[idx] == "" && ​​​​​​​​​​​​​​(cateNm == "" ? true : row.split(",")[idx-1] != "" && row.split(",")[idx-2] == cateNm) ​​​​​​); ​​​​​​cate.map(cate => options.push({ ​​​​​​​​value: cate.split(",")[0], ​​​​​​​​label: cate.split(",")[idx - 1] ​​​​​​})) ​​​​​​return options; ​​​​}, ​​​​getData() { ​​​​​​this.$axios.get(URL + 'apt/' + 'law_code.csv', {params: {}}) ​​​​​​​​​​.then((response) => { ​​​​​​​​​​​​this.rows = response.data.replace(/["]+/g, "").split("\n"); ​​​​​​​​​​​​this.options = this.chgCate("",2); ​​​​​​​​​​}); ​​​​}, ​​​​chgCate1() { ​​​​​​this.lastCate = this.cate1; ​​​​​​let cateNm = this.options[this.options.findIndex(e => e.value === this.cate1)].label; ​​​​​​this.options2 = this.chgCate(cateNm,3); ​​​​}, ​​​​chgCate2() { ​​​​​​this.lastCate = this.cate2; ​​​​​​let cateNm = this.options2[this.options2.findIndex(e => e.value === this.cate2)].label; ​​​​​​this.options3 = this.chgCate(cateNm,4); ​​​​}, ​​​​chgCate3() { ​​​​​​this.lastCate = this.cate3; ​​​​​​let cateNm = this.options3[this.options3.findIndex(e => e.value === this.cate3)].label; ​​​​​​this.options4 = this.chgCate(cateNm,5); ​​​​}, ​​​​chgCate4() { ​​​​​​this.lastCate = this.cate4; ​​​​}, ​​} } </script> <style scoped></style>

위코드에서 중요한 부부은 104~110라인의 getData() 부분으로 axios를 이용해서 law_code.csv를 가져오는 부분입니다.

 

실행결과

 

댓글()

[vue.js][App] FontAwesome 아이콘 종류 검색

Language/Vue.js|2021. 8. 19. 13:19

 

https://fontawesome.com/cheatsheet에 접속하시면 무료로 사용할수 있는 아이콘들을 확인할수 있습니다. 

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

 

 

조금더 쉽게 아이콘 검색을 위한 app을 만들어 보았습니다.

 

먼저 클립보드 복사 붙여 넣기를 쉽게 하기 위해 vue-clipboard2 를 설치합니다.

 

yarn add vue-clipboard2

main.js 파일을 아래와 같이 수정합니다. (클립보드를 사용할수 있게 변경합니다.)

 

import Vue from 'vue' import locale from 'element-ui/lib/locale/lang/ko' import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from './router' import '@fortawesome/fontawesome-free/js/all.js' import axios from "axios"; import VueClipboard from 'vue-clipboard2' import App from './App.vue' Vue.prototype.$axios = axios; Vue.config.productionTip = false Vue.use(Element, {locale},{ size: 'small', zIndex: 3000 }); Vue.use(VueClipboard); new Vue({ ​​router, ​​render: h => h(App), }).$mount('#app')

components/IconSearch.vue 파일을 아래와 같이 작성합니다.

<template> ​​<el-container> ​​​​<el-main> ​​​​​​<el-row> ​​​​​​​​<el-col :span="24"> ​​​​​​​​​​<h3>아이콘 검색</h3> ​​​​​​​​</el-col> ​​​​​​</el-row> ​​​​​​<el-row> ​​​​​​​​<el-col :span="24"> ​​​​​​​​​​<el-input placeholder="아이콘 이름을 입력하세요 ex) hotel" v-model="searchStr" @input="iconSearch"></el-input> ​​​​​​​​</el-col> ​​​​​​</el-row> ​​​​​​<el-row> ​​​​​​​​<el-col :span="22"> ​​​​​​​​​​<ul v-if="searchIcon.length > 0"> ​​​​​​​​​​​​<li v-for="item in searchIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer"> ​​​​​​​​​​​​​​<i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b> ​​​​​​​​​​​​​​<span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span> ​​​​​​​​​​​​</li> ​​​​​​​​​​</ul> ​​​​​​​​</el-col> ​​​​​​</el-row> ​​​​​​<el-row> ​​​​​​​​<el-col :span="24"> ​​​​​​​​​​<h3>아이콘 색인</h3> ​​​​​​​​</el-col> ​​​​​​</el-row> ​​​​​​<el-row> ​​​​​​​​<el-col :span="2"> ​​​​​​​​​​<ul v-if="alphabet.length > 0"> ​​​​​​​​​​​​<li v-for="item in alphabet" :key="item"> ​​​​​​​​​​​​​​<button @click="iconIndex(item)">{{item}}</button> ​​​​​​​​​​​​</li> ​​​​​​​​​​</ul> ​​​​​​​​</el-col> ​​​​​​​​<el-col :span="22"> ​​​​​​​​​​<ul v-if="indexIcon.length > 0"> ​​​​​​​​​​​​<li v-for="item in indexIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer"> ​​​​​​​​​​​​​​<i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b> ​​​​​​​​​​​​​​<span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span> ​​​​​​​​​​​​</li> ​​​​​​​​​​</ul> ​​​​​​​​</el-col> ​​​​​​</el-row> ​​​​</el-main> ​​</el-container> </template> <script> const URL = "https://onehit9.github.io/"; export default { ​​name: "IconSearch", ​​created() { ​​​​this.alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); ​​​​this.$axios.get(URL + 'apt/' + 'font.csv', {params: {}}) ​​​​​​​​.then((response) => { ​​​​​​​​​​this.icons = response.data.split(","); ​​​​​​​​​​this.iconIndex('a'); ​​​​​​​​}); ​​}, ​​data() { ​​​​return { ​​​​​​searchStr: '', ​​​​​​message: '', ​​​​​​alphabet : [], ​​​​​​indexIcon: [], ​​​​​​searchIcon: [], ​​​​​​icons: [], ​​​​} ​​}, ​​methods: { ​​​​iconIndex(idx) { ​​​​​​this.indexIcon = this.icons.filter(item => item.charAt(0) === idx); ​​​​}, ​​​​iconSearch(str) { ​​​​​​if(str.length <2 ) { ​​​​​​​​this.searchIcon = []; ​​​​​​​​return; ​​​​​​} ​​​​​​this.searchIcon = this.icons.filter(item => item.indexOf(str) > -1); ​​​​}, ​​​​copyClipboard(item) { ​​​​​​const text = '<i class="fas fa-' + item+'"></i>'; ​​​​​​this.$copyText(text); ​​​​​​this.$message(text + ' 클립보드에 복사되었습니다. 붙여넣기(ctrl + v) 하여 사용하실수 있습니다.'); ​​​​}, ​​} } </script>

코드설명

1. font.csv 파일을 만들어서 사용할수 있는 아이콘의 문자열을 , 로 분리시켜 저장합니다.

2.axios로 csv 파일을 불러와서 icons array에 추가합니다.

3. 해당 검색어 및 인덱스에 맞는 아이콘만 필터하여 보여 줍니다.

4. 클릭시 클립보드에 복사되도록 copyText 를 실행합니다.

 

실행결과

 

 

 

댓글()

[vue.js] FontAwesome 폰트어썸 사용

Language/Vue.js|2021. 8. 19. 11:57

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. Font Awesome 이라는 라이브러리 인데요 웹 아이콘 폰트 시장에서 가장 인기있는 라이브러리 입니다. 이번 시간에는 Vue.js 에서 Font Awesome 을 사용하는 방법에 대해서 알아 보겠습니다.

설치

Vue.js 프로젝트를 생성했다고 가정하고 font awesome 을 추가 설치 하는 방법입니다. yarn 또는 npm 둘중 하나의 방법을 이용해 라이브러리를 추가해 주세요

yarn을 이용한 설치

yarn 을 이용한 설치 방법입니다.

yarn add @fortawesome/fontawesome-free

npm 설치 방법

npm을 이용한 설치 방법 입니다.

npm install --save @fortawesome/fontawesome-free

main.js 수정

main.js 에  import '@fortawesome/fontawesome-free/js/all.js' 코드를 추가합니다.

 

import Vue from 'vue' import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from './router' import '@fortawesome/fontawesome-free/js/all.js' import App from './App.vue' Vue.config.productionTip = false Vue.use(Element, { size: 'small', zIndex: 3000 }); new Vue({ ​​router, ​​render: h => h(App), }).$mount('#app')

사용법

vue.js template 부분에 아래와 같이 코드를 작성하시면 아이콘이 출력됩니다.

<i class="fa fa-bus"></i> <i class="fas fa-ambulance"></i> <i class="fas fa-hotel"></i>

 

실습

componets 에 FontAwesome.vue파일을 생성하고 아래와 같이 입력합니다.

<template> ​​<div style="margin-top:40px"> ​​​​<i class="fa fa-bus fa-lg"></i> ​​​​<i class="fas fa-ambulance fa-2x"></i> ​​​​<i class="fas fa-hotel fa-4x"></i> ​​</div> </template> <script> export default { ​​name: "FontAwesome" } </script> <style scoped> </style>

router/basic.js 파일에 추가한 컴포넌트의 path를 지정합니다. (page2 라고 지정함)

import HelloWorld from "@/components/HelloWorld"; import Page1 from "@/components/Page1"; import FontAwesome from "@/components/FontAwesome"; const basic = [ ​​​​{path: '/', name: 'index', component: HelloWorld}, ​​​​{path: '/hello-world', name: 'HelloWorld', component: HelloWorld}, ​​​​{path: '/page1', name: 'Page1', component: Page1}, ​​​​{path: '/page2', name: 'FontAwesome', component: FontAwesome}, ]; export default basic;

App.vue에 추가한 페이지 page2에 대한 라우터 링크를 추가합니다.

<template> ​​<div id="app"> ​​​​<router-link to="/hello-world">hello</router-link> | ​​​​<router-link to="/page1">page1</router-link> | ​​​​<router-link to="/page2">page2</router-link> | ​​​​<router-view></router-view> ​​</div> </template> <script> export default { ​​name: 'App' } </script> <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: 10px; } </style>

실행결과

 

댓글()

[vue.js] vue-router 사용하기

Language/Vue.js|2021. 8. 1. 10:06

vue-router 설치 및 활용방법 입니다.

 

 

설치하기

npm install vue-router

 

package.json 파일 14라인에 vue-router가 추가 되었습니다.

 

{ ​​"name": "vue2", ​​"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.6.5", ​​​​"element-ui": "^2.15.3", ​​​​"vue": "^2.6.11", ​​​​"vue-router": "^3.5.2" ​​}, ​​"devDependencies": { ​​​​"@vue/cli-plugin-babel": "~4.5.0", ​​​​"@vue/cli-plugin-eslint": "~4.5.0", ​​​​"@vue/cli-service": "~4.5.0", ​​​​"babel-eslint": "^10.1.0", ​​​​"eslint": "^6.7.2", ​​​​"eslint-plugin-vue": "^6.2.2", ​​​​"vue-template-compiler": "^2.6.11" ​​}, ​​"eslintConfig": { ​​​​"root": true, ​​​​"env": { ​​​​​​"node": true ​​​​}, ​​​​"extends": [ ​​​​​​"plugin:vue/essential", ​​​​​​"eslint:recommended" ​​​​], ​​​​"parserOptions": { ​​​​​​"parser": "babel-eslint" ​​​​}, ​​​​"rules": {} ​​}, ​​"browserslist": [ ​​​​"> 1%", ​​​​"last 2 versions", ​​​​"not dead" ​​] }

 

아래와 같이 디렉토리 (src/router)를 구성하고 basic.js , index.js 파일을 생성합니다.

├── src │   ├── App.vue │   ├── assets │   │   └── logo.png │   ├── components │   │   ├── HelloWorld.vue │   │   └── Page1.vue │   ├── main.js │   └── router │   ├── basic.js │   └── index.js

 

router/index.js : 여러개의 router를  import 하는 역할을 담당합니다.

/* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' import basic from "@/router/basic"; Vue.use(Router) export default new Router({ ​​​​mode: 'hash', ​​​​routes: [ ​​​​​​​​...basic ​​​​] })

router/basic.js : 기본 router 입니다. 내용이 추가될때 마다 이곳에 컴포넌트를 추가하여 path에 사용하는 컴포넌트를 정의합니다.

import HelloWorld from "@/components/HelloWorld"; import Page1 from "@/components/Page1"; const basic = [ ​​​​{path: '/', name: 'index', component: HelloWorld}, ​​​​{path: '/hello-world', name: 'HelloWorld', component: HelloWorld}, ​​​​{path: '/page1', name: 'Page1', component: Page1}, ]; export default basic;

 

Page1.vue 파일을 생성합니다.

<template> ​​<div id="app"> ​​​​{{ page1 }} ​​</div> </template> <script> export default { ​​name: 'Page1', ​​data() { ​​​​return { ​​​​​​page1 : "test router", ​​​​} ​​} } </script> <style scoped></style>

 

main.js 파일을 아래와 같이 수정합니다.

import Vue from 'vue' import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from './router' import App from './App.vue' Vue.config.productionTip = false Vue.use(Element, { size: 'small', zIndex: 3000 }); new Vue({ ​​router, ​​render: h => h(App), }).$mount('#app')

 

그리고 나서 build 하여 실행해보면 아래와 같은 페이지를 확인할수 있습니다.

 

hello-world

page1

댓글()

[vue.js] BASE_URL public_path 변경하기

Language/Vue.js|2021. 8. 1. 09:52

vue.js  BASE_URL public_path 변경하기

BASE_URL public_path 변경하는 방법입니다.

 

package.json 파일이 있는 위치에 "vue.config.js" 파일을 생성합니다.

 

 

vue.config.js 파일에 아래와 같이 입력합니다.

 

module.exports = { ​​​​publicPath: '/dist/', }

 

npm run deploy 합니다.

그럼 아래와 같이 base_url이 변경되었음을 확인할수 있습니다.

 

기존 

... 중략 ... <link href="/css/app.dba1af84.css"> ... 중략 ...

 

변경후

... 중략 ... <link href="/dist/css/app.dba1af84.css"> ... 중략 ...

 

'Language > Vue.js' 카테고리의 다른 글

[vue.js] FontAwesome 폰트어썸 사용  (0) 2021.08.19
[vue.js] vue-router 사용하기  (0) 2021.08.01
[vue.js] vue element-ui(ui 컴포넌트) 설치 및 사용  (0) 2021.07.31
[vue.js] 컴포넌트  (0) 2021.07.26
[vue.js] 소개  (0) 2021.07.26

댓글()

[vue.js] vue element-ui(ui 컴포넌트) 설치 및 사용

Language/Vue.js|2021. 7. 31. 11:15

vue용 대표 ui 컴포넌트인  element-ui 설치 방법 입니다.

 

vue project 에서 아래 명령어를 실행합니다.

npm i element-ui -S

 

실행이 끝나고 나서 package.json 파일을 확인하면 11 라인 처럼 "element-ui": "^2.15.3" 가 추가된걸 확인할수

있습니다.

{ ​​"name": "vue2", ​​"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.6.5", ​​​​"element-ui": "^2.15.3", ​​​​"vue": "^2.6.11" ​​}, ​​"devDependencies": { ​​​​"@vue/cli-plugin-babel": "~4.5.0", ​​​​"@vue/cli-plugin-eslint": "~4.5.0", ​​​​"@vue/cli-service": "~4.5.0", ​​​​"babel-eslint": "^10.1.0", ​​​​"eslint": "^6.7.2", ​​​​"eslint-plugin-vue": "^6.2.2", ​​​​"vue-template-compiler": "^2.6.11" ​​}, ​​"eslintConfig": { ​​​​"root": true, ​​​​"env": { ​​​​​​"node": true ​​​​}, ​​​​"extends": [ ​​​​​​"plugin:vue/essential", ​​​​​​"eslint:recommended" ​​​​], ​​​​"parserOptions": { ​​​​​​"parser": "babel-eslint" ​​​​}, ​​​​"rules": {} ​​}, ​​"browserslist": [ ​​​​"> 1%", ​​​​"last 2 versions", ​​​​"not dead" ​​] }

 

진입점 파일 main.js 파일에 3,4 라인과 같이 element-ui 관련 내용을 추가합니다.

그리고 나서 8번 라인에  element ui 사용하겠다고 선언합니다.

Vue.use(Element, { size: 'small', zIndex: 3000 });

 

import Vue from 'vue' import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue' Vue.config.productionTip = false Vue.use(Element, { size: 'small', zIndex: 3000 }); new Vue({ ​​render: h => h(App), }).$mount('#app')

 

App.vue 파일을 아래와 같이 수정합니다.

<template> ​​<div id="app"> ​​​​<el-row> ​​​​​​<el-col :span="24"> ​​​​​​​​<div class="grid-content bg-purple-dark"></div> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="12"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="12"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="8"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="8"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="8"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="6"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="6"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple"></div> ​​​​​​</el-col> ​​​​​​<el-col :span="4"> ​​​​​​​​<div class="grid-content bg-purple-light"></div> ​​​​​​</el-col> ​​​​</el-row> ​​</div> </template> <script> export default { ​​name: 'App', } </script> <style> .el-row { ​​margin-bottom: 20px; &:last-child { ​​​margin-bottom: 0; } } .el-col { ​​border-radius: 4px; } .bg-purple-dark { ​​background: #99a9bf; } .bg-purple { ​​background: #d3dce6; } .bg-purple-light { ​​background: #e5e9f2; } .grid-content { ​​border-radius: 4px; ​​min-height: 36px; } .row-bg { ​​padding: 10px 0; ​​background-color: #f9fafc; } </style>

 

실행결과

'Language > Vue.js' 카테고리의 다른 글

[vue.js] vue-router 사용하기  (0) 2021.08.01
[vue.js] BASE_URL public_path 변경하기  (0) 2021.08.01
[vue.js] 컴포넌트  (0) 2021.07.26
[vue.js] 소개  (0) 2021.07.26
[vue.js] 개발 환경 구축하기  (0) 2021.07.25

댓글()

[vue.js] 컴포넌트

Language/Vue.js|2021. 7. 26. 22:37

vue 컴포넌트

vue 는 컨포넌트로 시작해서 컨포넌트로 끝난다라고 생각하시면 됩니다.. 이 컨포넌트에 대해서 잘알고 있으면 앞으로 문법들이나 예제들을 보는데 도움이 될것 같아 정리해 보겠습니다.

 CBD(Component Based Development)

CBD 는 시스템을 일체형으로 구축하지 않고 레고 블록 부품 하나씩을 조립해서 큰 레고 블록을 만드는 것처럼 시스템의 구성요소들을 컨포넌트라는 작은 요소로 분리하여 하나씩 만들고 이를 조립해서 하나의 시스템을 만든다는 개념입니다.

아래 app 은 총 5개의 컨포넌트로 이루어져 있습니다.

  1. 팝업된 윈도우 자체가 컴포넌트 입니다. 이컨포넌트는 윈도우 제목과 창닫기 버튼이 있습니다. 창닫기 버튼을 클릭하면 창을 닫는 역할을 수행합니다.
  2. 메모 3,4,5를 가지고 있는 부모 컨포넌트 입니다. 2번 화면에서 데이터를 저장하고 메모리스트를 가지고 오는 로직이 들어 있지만 화면은 존재하지 않습니다.
  3. 메모 상단에 위치한 컨포넌트 입니다.
  4. 메모를 작성하는 컴포넌트 입니다. 제목과 내용을 입력받아 저장버튼을 클릭하면 입력받은 글을 부포 컨포넌트에게 전달합니다.
  5. 댓글 리스트 컨포넌트로 댓글 배열을 받아서 리스트업하고 수정이나 삭제 버튼을 클릭하면 부모에게 수정및 삭제 이벤트를 발생합니다

왜 이렇게 개발할까요 ? 그냥 하나로 개발하면 되는데 왜 복잡하게 이렇게 개발하는 걸까요 ? 만든 컴포넌트를 재사용하기 위해서 입니다. 위에 5번 댓글 컨포넌트는 상당히 많이 사용되죠 ? 메모 app 에서도 사용될수 있지만 게시판의 글 보기 app 에도 사용될수 있습니다. 같은 기능을 계속 개발한다면 시간도 많이 들어가고 유지보수 하기도 힘들꺼에요 예를 들어 모든 댓글의 아이콘을 바꾼다고 가정하면 이걸 일일이 찾아서 모두 변경해 줘야 되죠 하지만 컴포넌트를 불러와서 사용했다면 하나만 수정하면 모든 app 들의 아이콘이 한번에 변경됩니다. 컨포넌트 기반으로 개발하면 불필요한 코딩을 줄일수 있고 유지 보수도 용이해 집니다. 그리고 실력있는 고참 개발자분들이 컨포넌트를 잘 만들어 놓았다면 화면을 개발하는 개발자는 해당 app 에서 사용하는 데이터 모델과 비지니스 프로세스만 잘 구현하고 실제 구현에 필요한 개발공수는 줄어듭니다. 그래서 cbd 기반으로 개발을 진행합니다.

 

예제

아래와 같은 tab 컴포넌트는 여러화면에서 사용하는 컴포넌트 입니다. 이름이 default 로 선택되어져 있는데 "나이"가 default 선택된 탭을 하나더 만든다고 가정하면 컴포넌트를 사용하지 않으면 중복된 코드들이 존재 할수 있습니다. 이렇게 공통으로 사용하는 탭 같은경우에는 컨포넌트로 만들어서 active 되는 탭만 props 로 지정해서 넘겨주고 props 값에 따라 default 선택 탭을 변경하면 됩니다.

 

실습

EleTab.vue

<template> ​​<div id="tab"> ​​​​<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"> ​​​​​​<el-tab-pane v-for="(item, index) in tabInfo" :key="index" :label="item" :name="item"> ​​​​​​​​{{ tabInfo.concat(',') }}{{item}} ​​​​​​</el-tab-pane> ​​​​</el-tabs> ​​</div> </template> <script> export default { ​​name: "EleTab", ​​props: { ​​​​tabInfo: Array, ​​​​active : String, ​​}, ​​data() { ​​​​return { ​​​​​​activeName : '' ​​​​} ​​}, ​​methods: { ​​​​handleClick() { ​​​​​​this.$emit("ele-tab-click",this.activeName); ​​​​} ​​}, ​​watch: { ​​​​active: { ​​​​​​immediate: true, ​​​​​​deep: true, ​​​​​​handler(newValue, oldValue) { ​​​​​​​​if(newValue !== oldValue) this.activeName = newValue; ​​​​​​} ​​​​} ​​} } </script> <style scoped></style>

Page6.vue

<template> ​​<div> ​​​​<el-row> ​​​​​​<el-col :span="24"> ​​​​​​​​하위 컴포넌트가 전달한값 : {{ sendData }} ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="24"> ​​​​​​​​<ele-tab @ele-tab-click="handleClick" :tabInfo="[ '이름' , '나이' , '성별' , '하는일']" active="이름" /> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="24"> ​​​​​​​​<ele-tab @ele-tab-click="handleClick" :tabInfo="[ '이름' , '나이' , '성별' , '하는일']" active="나이" /> ​​​​​​</el-col> ​​​​</el-row> ​​​​<el-row> ​​​​​​<el-col :span="24"> ​​​​​​​​<ele-tab @ele-tab-click="handleClick" :tabInfo="[ '지역' , '기업' , '종교' , '취미' ,'기타1', '기타2']" active="취미" /> ​​​​​​</el-col> ​​​​</el-row> ​​</div> </template> <script> import EleTab from "@/components/EleTab"; export default { ​​name: "Page6", ​​components: { ​​​​EleTab ​​}, ​​methods: { ​​​​handleClick(data) { ​​​​​​this.sendData = data; ​​​​} ​​}, ​​data() { ​​​​return { ​​​​​​sendData : '', ​​​​} ​​} } </script> <style scoped></style>

코드설명

EleVue 컴포넌트는 element-ui 컴포넌트중 탭 컴포넌트를 사용했고 Page6.vue에서 만든 해당 컴포넌트를 재활용하는 형태로 구현했습니다.

댓글()