Laravel8+Vue3+Bootstrap5實作TODO List ep07:安裝vue3跟基本設定

Table of Contents

Table of Contents

使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第七篇。
本文將介紹一下安裝vue的過程跟基本的設定。

教學影片

安裝vue3

執行以下指令來導入vue3。

npm install 
npm install --save-dev vue@next

安裝成功後,package.json中將會包含vue的描述。


"devDependencies": {
    // ...
    "vue": "^3.2.23"
}

開始使用vue

app.js

在app.js中產生vue的應用並設定他的作用範圍在id=app的要素(例如<div>)中。

require('./bootstrap');

import { createApp } from 'vue'
import TodoListComponent from './components/TodoListComponent.vue'

createApp({
    components: {
        'v-todo-list': TodoListComponent
    }
}).mount('#app')

可以看到在app.js中載入了一個尚未建立的檔案TodoListComponent.vue
並且還設定一個標籤名稱v-todo-listTodoListComponent
所以下一步就是去建立TodoListComponent.vue

建立TodoListComponent.vue

先建立一個views/js/components/資料夾,在裡頭簡單製作一下TodoListComponent.vue元件。
這個元件主要是來製作todo list的畫面,而畫面詳細製作在下一篇才會介紹,所以目前此元件中先只包含簡單的<h2>標題。

<template>
    <div>
        <h2>My Todo List</h2>
    </div>
</template>
<script>
    export default {
        data: function() {
            return {}
        },
    }
</script>

完成之後,要在畫面檔案中去載入app.js才能讓vue發揮作用。
所以下一步就是去修改畫面檔案welcome.blade.php

blade

修改畫面(welcome.blade.php)。
修改目的是在畫面中載入vue(app.js)並將<body>中的內容刪除,改用vue元件(<v-todo-list>)。

<body class="antialiased">
    <div id="app">
        <v-todo-list></v-todo-list>
    </div>
</body>
<script src="{{ mix('js/app.js') }}"></script>

<script src="{{ mix('js/app.js') }}"></script>是載入打包後的app.js檔案。
因為基本上會將js檔案去做打包處理才拿來使用,而Laravel中可以使用webpack來做打包,所以webpack的部分也要做相對的修改。

webpack

為了順利編譯vue,需修改webpack.min.js
mix的部分中最後呼叫**vue()**函數即可。

// ...
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .vue();

然後執行以下指令可將js檔案打包。 要記得修改js檔案都要重新打包一次。

# 下面為手動打包指令
npm run dev 

# 下面為每次儲存修改後會系統自動打包的指令
npm run watch

打包成功之後可以到畫面上去確認是否顯示了<h2>的標題:My Todo List


本篇簡單介紹了在Laravle中安裝vue,並且做了基本設定讓畫面可以使用vue的元件。
下一篇會來介紹用vue重新建立Todo List的畫面。
那麼,我們下回見!