Electron Vue 是一個基于 Electron 和 Vue 的項目模板，旨在幫助開發者更快地構建跨平臺桌面應用程序。本教程將介紹如何使用 Electron Vue 來構建一個簡單的桌面應用。 第一步是安裝 Electron Vue 模板，可以通過以下命令來完成：

$ vue init simulatedgreg/electron-vue my-project
$ cd my-project
$ npm install

這個命令會下載一個名為 electron-vue 的模板，將其復制到一個新的項目目錄中，并安裝所有依賴項。接下來，你可以運行以下命令來啟動開發服務器：

$ npm run dev

這個命令會啟動一個本地服務器，你可以在瀏覽器中打開 http://localhost:9080 來訪問應用程序。 接下來，你可以開始編寫自己的代碼了。所有的 Vue 組件都應該存儲在 src/renderer/components 目錄中。你可以創建一個新的 Vue 組件，例如 MyComponent.vue：

<script>
export default {}
</script>
<style scoped>
p {
font-size: 20px;
}
</style>

這個組件將在瀏覽器中渲染一個帶有“Hello World!”文本的段落元素。 然后，在 src/renderer/router/index.js 中添加路由器代碼：

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'MyComponent',
component: MyComponent
}
]
})

這個代碼將告訴應用程序在訪問首頁時渲染 MyComponent 組件。 現在，你可以在瀏覽器中訪問 http://localhost:9080 來查看你的應用程序。你應該會在頁面上看到“Hello World!”文本。 接下來，我們需要將應用程序打包為一個可執行文件。運行以下命令來創建一個打包文件：

$ npm run build

這個命令將會構建所有的應用程序文件，并將它們存儲在 dist 目錄中。你可以運行以下命令來啟動你的應用程序：

$ npm run start

這個命令將會在默認瀏覽器中打開應用程序。 這就是 Electron Vue 的基礎知識。通過這個簡單的例子，你應該可以了解到如何使用 Electron Vue 將你的 Vue 組件構建為桌面應用程序。如果你需要更深入的內容，請查看官方文檔。