iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

什麼都略懂一點,生活更多彩一些。從web跑js出發到部屬heroku伺服器撈取API建構線上網站與LineBot系列 第 23

[day23][前端][實作] 用webpack自架Vue3環境(中)-vuex,router

  • 分享至 

  • xImage
  •  

同步發表到驢形筆記

前情題要

上一篇在加入許多套件模組,許多的設定檔後已經讓你的webpack可以轉譯Vue相關的程式了,這篇就開始引入"Vuex"和"vue-router"吧

首先安裝兩個模組吧

npm i vue-router@next --save
npm i vuex@next --save

在Vue的進入點建立Vue實體的時候追加引入兩個模組

src\client\main.js

import { createApp } from 'vue';

import App from './app.vue';
import router from './router';
import store from './store';
略
createApp(App).use(store).use(router).mount('#app');

依照vue結構建立"router"和"store"並建立以下檔案內容

src\client\router\index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
import home from '../views/home.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: home,
  }
]
const router = createRouter({
  history: createWebHistory(),
  // history: createWebHashHistory(),
  routes
})
export default router;

src\client\store\index.js

import { createStore } from 'vuex'
export default createStore({
  state: {
    store: 'Vuex'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

最後修改"app.js"檔案追加"router-view"和引入Vuex就可以了

<template>
  <div class="container">
    hello {{state.message}}
    <router-view
      class="main_container"
    />
    hello {{ vuexName }}
  </div>
</template>

<script>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
export default {
  setup () {
    const state = reactive({
      message: 'Vue3'
    })
    const store = useStore();
    const vuexName = computed(() => store.state.store);
    return {
      state,
      vuexName
    }
  }
}
</script>
略

完成,現在畫面上出現三個hello world了!

https://ithelp.ithome.com.tw/upload/images/20201007/20130673mSGXxB1X0t.jpg

完成,今天的工作就是這樣~!

githubday23


上一篇
[day22][前端][實作] 用webpack自架Vue3環境(上)
下一篇
[day24][前端][實作] 用webpack自架Vue3環境(下)-Vue3(composition)
系列文
什麼都略懂一點,生活更多彩一些。從web跑js出發到部屬heroku伺服器撈取API建構線上網站與LineBot30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言