yarn 으로 시작하기
1. yarn 설치
https://pakss328.medium.com/yarn이란-b4e8edf1638b
2. yarn global add @vue/cli-init
3. vue init webpack vue-board
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $ vue init webpack vue-board ? Project name vue-board ? Project description A Vue.js project ? Author junhochoi ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) yarn vue-cli ·· Generated "vue-board" . |
# VueJS 해쉬뱅 # 기호 url 제거하기
아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.
export default new Router({ mode: 'history', routes: [ ... ] ... });
App.vue
<template> <div id="app"> <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: 60px; } </style>
data/index.js
export default[ { writer:'아이린', title:'레드벨벳', content:'1' }, { writer:'슬기', title:'레드벨벳2', content:'2' }, { writer:'웬디', title:'레드벨벳3', content:'3' }, ]
router/index.js
import Vue from 'vue' import Router from 'vue-router' import Read from '@/components/Read' import Create from '@/components/Create' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', name: 'Read', component: Read }, { path: '/create/:contentId?', name: 'Create', component: Create }, { path: '/detail/:contentId', name: 'Detail', component: Detail }, ] })
components/Create.vue
<template> <div> <input v-model="writer" placeholder="글쓴이" /> <input v-model="title" placeholder="제목" /> <textarea v-model="content" placeholder="내용" ></textarea> <button @click="index !== undefined ? update():write()" >{{index !==undefined ? "수정":"작성"}}</button> </div> </template> <script> import data from '@/data'; export default { name:'Create', data(){ const index=this.$route.params.contentId; return{ data:data, index:index, writer:index !==undefined ? data[index].writer:"", title:index !==undefined ? data[index].title:"", content:index !==undefined ? data[index].content:"", } }, methods:{ write(){ this.data.push({ writer:this.writer, title:this.title, content:this.content }); this.$router.push({ path:'/' }); }, update(){ console.log("수정"); data[this.index].writer=this.writer; data[this.index].title=this.title; data[this.index].content=this.content; this.$router.push({ path:'/' }); } } } </script> <style> </style>
components/Detail.vue
<template> <div> <div>{{data.writer}}</div> <div>{{data.title}}</div> <div>{{data.content}}</div> <button @click="updateData">수정</button> <button @click="deleteData">삭제</button> 인덱스: {{index}} </div> </template> <script> import data from '@/data'; export default { name: "Detail", data(){ const index=this.$route.params.contentId return{ data:data[index], index:index } }, methods:{ deleteData(){ console.dir(this.index); data.splice(this.index, 1); this.$router.push({ path:'/' }); }, updateData(){ this.$router.push({ name:'Create', params:{ contentId:this.index } }); } } }; </script> <style> </style>
components/Read.vue
<template> <div> <div>{{data.writer}}</div> <div>{{data.title}}</div> <div>{{data.content}}</div> <button @click="updateData">수정</button> <button @click="deleteData">삭제</button> 인덱스: {{index}} </div> </template> <script> import data from '@/data'; export default { name: "Detail", data(){ const index=this.$route.params.contentId return{ data:data[index], index:index } }, methods:{ deleteData(){ console.dir(this.index); data.splice(this.index, 1); this.$router.push({ path:'/' }); }, updateData(){ this.$router.push({ name:'Create', params:{ contentId:this.index } }); } } }; </script> <style> </style>
https://github.com/braverokmc79/vue-board
https://www.youtube.com/watch?v=s1lXVr65KZg&list=PLyjjOwsFAe8ITIDUNsU_x4XNbPJeOvs-b&index=1
댓글 ( 4)
댓글 남기기