Webpack 5 走起! - Vue(10) - vue-louter

前言

學會基本的 Webpack 之後其實我們也可以自己來試著手動設定 vue。

Vue

基本上這邊就不再多介紹什麼是 Vue 了,在以往我們使用 Vue Cli 的時候,都會看到檔案是 .vue 官方文件上,而這個檔案名稱其實是必須透過 vue-loader 來編譯的,因此在官方文件上會要求你安裝以下套件

1
npm install -D vue-loader vue-template-compiler

至於其他設定呢?其實官方給的滿詳細的,因此以下擷取官方文件設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}

接下來你可以試著在 template 中新增一個 *.vue 檔案,內容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div id="app">
<h1>這是一段話</h1>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {};
},
}
</script>

<style>
</style>

接下來開啟 main.js 注入該檔案後 import './template/App.vue'; 直接輸入 npm run dev

基本上不意外你會發生一個錯誤就是「Module not found: Error: Can't resolve 'Vue'」,這個問題其實是因為我前面少安裝了 Vue,因此這邊除了安裝前面 loader 之外也要記得安裝 Vue

1
npm install -save vue

接下來你在輸入 npm run dev 就不會出現錯誤了,但是你應該會覺得很奇怪為什麼 .vue 中的東西沒有出現,因為這邊我們要稍微調整一下 main.js 內容才可以。

當若我們對於如何起手架設一個自己的 Vue Webpack 時,其實有一個很好的參考檔案,也就是 Vue Cli 的注入方式,所以這邊我直接列出應該寫在 main.js 中的重點,並調整後依據我們自己專案後如下:

1
2
3
4
5
6
7
import Vue from 'vue';
import App from './App';

new Vue({
el: '#app',
render: (h) => h(App),
});

接下來當你輸入 npm run dev 開啟瀏覽器時,就可以發現 vue 已經成功渲染到畫面上了囉~

參考文獻

Liker 按讚 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點牡蠣鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)機制,一個人一篇文章最多只能按五下拍手,如果你願意按個讚,對於創作者是一個莫大的鼓勵。

Google AD