iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
3
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 22

【I Love Vue 】 Day 22 愛荷華博弈任務(三) - 專案建置與引用套件

  • 分享至 

  • xImage
  •  

做了這麼久的準備,終於讓我們千呼萬喚始出來。
開始建立我們的專案吧。

建立專案

  1. 建立專案 (詳細安裝方式:環境建置(三) )
vue create iowa_gambling_task
  1. 建立工作區(若有開啟工作區,要先關閉之後再建立)
  2. 安裝 VSCode 的小工具(之前有安裝的就不用再安裝了)
    (這邊有教學)

4.修改網頁的名稱為:愛荷華博弈任務 --> 這邊有教學
(透過vue.config.js來進行修改。)

到這邊為止就把我們的專案都建置完成了,接下來將需要用到的套件引入。

安裝套件與設定

vue-router

  1. Terminal輸入
npm i vue-router@next

接著我們來做一些設定

  1. 在src裡面新增一個資料夾layout
    (這個資料夾會用來存放我們版面用的.vue檔案)

  2. 在layout裡面新增index.vue(做為我們的首頁)

  3. index.vue 裡面寫:

<template>
  <p> this is index </p>
</template>

<script>
export default {
  name: 'index',
  components: {
  }
}
</script>

(方便我們等一下做測試)

  1. 在src裡面新增一個檔案 router.js
  2. 在router.js裡面寫下方程式碼:
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當作我們的首頁

  1. 修改main.js:
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是不是真的能派上用場。

  1. 修改App.vue:
<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. 看一下成果
https://ithelp.ithome.com.tw/upload/images/20201006/20115941jcIom7aOxR.jpg
可以看到我們只要加入<router-view/>之後,沒做任何設定的時候就會顯示index.vue的畫面。
(剛剛有在router.js上面設定預設首頁為index)
若之後想要切換畫面的時候,
我們也可以透過<router-link>來修改我們<router-view/>的內容。

這邊就完全設定好vue-router了。

vuex

  1. Terminal輸入
npm install vuex@next --save
  1. 在src裡面新增一個檔案 vuex.js
  2. 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的數值就加一
(方便等一下做測試)

  1. 接著修改main.js:
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

  1. 修改App.vue來進行一下測試:
    template:
<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的數值。

  1. 看一下測試結果:
    https://i.imgur.com/st8Afl1.gif

這樣就完成全域變數的加入了。


結語

這篇前半段都是在複習之前所介紹過的設定方式,
後半段介紹小夥伴們如何去安裝和設定我們之後需要用到的套件。

這邊有一點比較值得注意的地方,
vuex.js 裡面的 export default store
在這並沒有讓 預設輸出與檔名相同,
也借此告訴小夥伴,其實預設輸出不一定要與檔名相同喔。

下一篇我們會介紹應該如何構思,
一步一步的將我們的骨架建構上去。


上一篇
【I Love Vue 】 Day 21 愛荷華博弈任務(二) - 使用的工具與套件
下一篇
【I Love Vue 】 Day 23 愛荷華博弈任務(四) - 畫面架構
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言