1750
No
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)
댓글 남기기