做了這麼久的準備,終於讓我們千呼萬喚始出來。
開始建立我們的專案吧。
vue create iowa_gambling_task
4.修改網頁的名稱為:愛荷華博弈任務 --> 這邊有教學
(透過vue.config.js來進行修改。)
到這邊為止就把我們的專案都建置完成了,接下來將需要用到的套件引入。
npm i vue-router@next
接著我們來做一些設定
在src裡面新增一個資料夾layout
(這個資料夾會用來存放我們版面用的.vue
檔案)
在layout裡面新增index.vue
(做為我們的首頁)
index.vue
裡面寫:
<template>
<p> this is index </p>
</template>
<script>
export default {
name: 'index',
components: {
}
}
</script>
(方便我們等一下做測試)
import { createRouter, createWebHistory } from 'vue-router'
import index from './layout/index.vue'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
component: index
},
]
})
export default router
在之後畫面切換的部分,我們都會由router這邊來進行處理。
history: routerHistory,
使用歷史模式
path: '/',
component: index
這兩行表示我們用 index.vue裡面的index
當作我們的首頁
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引用router
var app = createApp(App)
app.use(router) // 使用 router
app.mount('#app')
在這邊引用我們剛剛寫好的router.js
到這邊我們就都設定完成了,
接下來測試一下剛剛設定完成的router是不是真的能派上用場。
<template>
<img alt="Vue logo" src="./assets/logo.png">
<router-view/>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>
將 HelloWord.vue 拿掉,並加入了<router-view/>
9. 看一下成果
可以看到我們只要加入<router-view/>
之後,沒做任何設定的時候就會顯示index.vue的畫面。
(剛剛有在router.js上面設定預設首頁為index
)
若之後想要切換畫面的時候,
我們也可以透過<router-link>
來修改我們<router-view/>
的內容。
這邊就完全設定好vue-router了。
npm install vuex@next --save
vuex.js
vuex.js
輸入下列程式碼:import { createStore } from 'vuex'
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment(state){
state.count++
}
},
actions: {}
})
export default store
我們在裡面新增了一個狀態count
,
順便寫了一個function() increment
,
每當觸發increment()
, count
的數值就加一
(方便等一下做測試)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引用./router 中的 router
import store from './vuex' //引用./vuex中的 store
var app = createApp(App)
app.use(router) // 使用 router
app.use(store) // 使用 store
app.mount('#app')
將我們寫好的store
加入到app
中
App.vue
來進行一下測試:<template>
<img alt="Vue logo" src="./assets/logo.png">
<router-view/>
<button @click='test'>按一下</button>
</template>
新增一個按鈕,按下去之後觸發test()
script:
<script>
import store from './vuex' // 引用 store
export default {
name: 'App',
store:store, //使用 store
components: {
},
methods:{
test(){
store.commit('increment') //執行 store中的 increment
alert('count:' + store.state.count)
}
}
}
</script>
載入store
並使用。
這邊的test()
等同於 test :function()
的縮寫。
當執行test()之後會觸發 increment()
,
之後再顯示 store裡面count
的數值。
這樣就完成全域變數的加入了。
這篇前半段都是在複習之前所介紹過的設定方式,
後半段介紹小夥伴們如何去安裝和設定我們之後需要用到的套件。
這邊有一點比較值得注意的地方,
在 vuex.js
裡面的 export default store
在這並沒有讓 預設輸出與檔名相同,
也借此告訴小夥伴,其實預設輸出不一定要與檔名相同喔。
下一篇我們會介紹應該如何構思,
一步一步的將我們的骨架建構上去。