当前位置： 首页>后端>正文

【Electron + Vue + Element Plus】项目初始配置流程

后端2024-05-05 15:07:19

1. 鏂板缓椤圭洰

鏍规嵁 Electron Forge 鐨勬枃妗ｏ紝鍙互鍦ㄨ鍒涘缓椤圭洰鐨勮矾寰勪笅锛屾帶鍒跺彴鎵ц浠ヤ笅涓ゆ潯鍛戒护涔嬩竴銆傚懡浠ゅ湪鎵ц鐨勮繃绋嬩腑浼氬湪褰撳墠璺緞涓嬫柊寤轰竴涓枃浠跺す锛屽苟鍦ㄥ叾涓垵濮嬪寲椤圭洰銆?/p>

yarn
yarn create electron-app my-vue-app --template=vite
npm
npm init electron-app@latest my-vue-app -- --template=vite

2. 娣诲姞渚濊禆

杩涘叆涓婅堪鍛戒护鎵ц鎵€鐢熸垚鐨勬枃浠跺す锛岀劧鍚庣浉搴斿湴鎵ц浠ヤ笅鍛戒护銆?/p>

yarn
yarn add vue
yarn add --dev @vitejs/plugin-vue
npm
npm install vue
npm install --save-dev @vitejs/plugin-vue

3. 鏁村悎 Vue 3 浠ｇ爜

浠ヤ笅灞曠ず鍚勬枃浠舵洿鏀瑰悗鐨勫唴瀹逛綔涓哄弬鑰冦€?/p>

~/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.js"></script>
  </body>
</html>
~/src/App.vue锛堟柊寤烘枃浠讹級
<template>
    <h1>馃挅 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
</template>

<script setup>
console.log('馃憢 This message is being logged by "App.vue", included via Vite');
</script>
~/src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
~/vite.renderer.config.mjs
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config
export default defineConfig({
    plugins: [vue()]
});

姝ゆ椂椤圭洰灏卞彲浠ヨ繍琛屼簡銆傚鏋滅敤鐨?IDE 鏄?WebStorm锛岄偅涔堝湪 package.json 涓?"start" 鎵€鍦ㄨ鍓嶅彲鐪嬪埌涓€涓豢鑹茬殑鎾斁鎸夐挳銆傜偣鍑诲嵆鍙繍琛屻€?/p>

4. 瀹夎 Element Plus

鏍规嵁 Element Plus 鐨勬枃妗ｏ紝鏈変互涓嬪嚑绉嶅缓璁殑瀹夎鏂瑰紡銆?/p>

yarn
yarn add element-plus
npm
npm install element-plus --save
pnpm
pnpm install element-plus

5. 瀹屾暣寮曞叆

瀹屾暣瀵煎叆 Element Plus 涔嬪悗浣跨敤璧锋潵浼氭瘮杈冩柟渚匡紝涓嶅鏄撳嚭鐜版牱寮忎涪澶辩殑闂銆?/p>

鐢ㄦ硶鍙弬鑰?Element Plus 鐨勬枃妗ｏ紝鍦ㄦ湰椤圭洰涓簲褰撲慨鏀?src/renderer.js 鏂囦欢銆?/p>

浠ヤ笅鏄枃浠朵慨鏀瑰悗鐨勫唴瀹广€?/p>

~/src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

createApp(App).use(ElementPlus).mount('#app');

https://www.xamrdz.com/backend/3su1942767.html

相关文章：