vite vue ts electron element-plus vuex 构建项目

首先，你需要安装 Node.js 和 npm。然后，可以按照以下步骤构建你的项目：

1. 创建项目文件夹并进入该文件夹：

mkdir my-project
cd my-project

2. 初始化项目：

npm init -y

3. 安装 Vite：

npm install vite --save-dev

4. 安装 Vue.js：

npm install vue@next --save

5. 安装 TypeScript：

npm install typescript --save-dev

6. 安装 Electron：

npm install electron --save-dev

7. 安装 Element Plus：

npm install element-plus --save

8. 安装 Vuex：

npm install vuex --save

9. 创建 TypeScript 配置文件：

npx tsc --init

10. 创建主进程和渲染进程的 Electron 入口文件：

// 主进程入口文件 main.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 渲染进程入口文件 src/renderer/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

11. 创建 Vue 组件，例如 App.vue：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App'
})
</script>

12. 创建 Vuex store，例如 store/index.ts：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

13. 创建路由器，例如 router/index.ts：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

14. 创建主页面组件，例如 views/Home.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  setup () {
    const store = useStore()

    return {
      message: 'Hello, World!',
      increment () {
        store.commit('increment')
      }
    }
  }
})
</script>

15. 运行项目：

npm run dev

以上就是使用 Vite、Vue.js、TypeScript、Electron、Element Plus 和 Vuex 构建项目的基本步骤。