「vue」和「webpack」碰出的火花

一、開發環境

• 整合開發環境：Visual Studio 2019

二、專案架構

圖、Visual Studio 2019 專案架構

圖、資料夾

三、Vue 安裝

圖、開啟命令提攜字元 > 切換到專案資料夾 > 輸入指令 yarn add vue

四、操作步驟

圖、修改 main.js

• 原始碼

const path = require('path');
const glob = require('glob');

let files = glob.sync("./Src/Js/**/*.js");
let exps = [];

for (let ind in files) {
    let fname = path.basename(files[ind]);
    let folder = path.dirname(files[ind]).replace('./Src/Js', './Content/Target/Js');
    exps.push(
        {
            entry: files[ind],
            output: {
                filename: fname,
                path: path.resolve(folder),
            },
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.esm.js'
                }
            }
        },
    )
}

module.exports = exps;

圖、新增 test.js

• 原始碼

import Vue from 'vue'

new Vue({
    el: '#app',
    data: {
        count: 'Test',
    },
    mounted: () => {
        console.log("Hello Test 1 Vue");
    }
});

圖、新增 test2.js

• 原始碼

import Vue from 'vue'

new Vue({
    el: '#app',
    data: {
        count: 'Test',
    },
    mounted: () => {
        console.log("Hello Test 2 Vue");
    }
});

圖、修改 Index.cshtml

• 原始碼

<div id="app">
    <h1>{{count}}</h1>
</div>

<script src="~/Content/Target/Js/Test/Test.js"></script>

圖、修改 package.json 的 scripts 區段

• 原始碼

"dev": "webpack --watch --mode development --config .\\Src\\main.js",
"build": "webpack --mode development --config .\\Src\\main.js"

圖、開啟命令提攜字元 > 切換到專案資料夾 > 輸入指令 yarn dev

圖、執行結果

五、相關連結

1. 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站
2. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
3. 快速的套件管理工具「Yarn」
4. 開源的前端打包工具「Webpack」

六、參考

1. Vue