Electron: 如何以 Vue.js, Vuetify 开始应用

最新推荐文章于 2025-07-03 07:59:38 发布

原创

最新推荐文章于 2025-07-03 07:59:38 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #npm #nodejs #typescript #前端

本文介绍了如何利用 Electron 框架结合 Vue.js 和 Vuetify 来创建原生桌面应用。从环境准备（包括 Visual Studio Code、Node.js、Yarn 和 Vue CLI）到创建 Vue 项目、添加 Vuetify 组件，再到整合 Electron 构建和发布应用，详细阐述了每个步骤，并解决了可能出现的错误和警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架
Vue.js: Web 前端用于构建用户界面的渐进式框架
Vuetify: Vue.js 的 Material Design 组件框架

看完以上介绍，也明白了本文要做的事：用 Vue.js 与 Vuetify 组件，基于 Electron 来创建原生桌面应用。

环境准备
- Visual Studio Code
- Node.js
- Yarn
- Vue CLI
创建 Vue.js 应用
添加 Vuetify 组件
添加 Electron 构建
发布 Electron 应用
参考
结语

环境准备

Visual Studio Code

建议使用的 VS Code 编辑代码，下载地址： https://code.visualstudio.com/ 。

同时可安装如下些扩展：

ESLint: 代码检查
Prettier - Code formatter: 代码格式化
Vetur: Vue 代码工具
Vue 2 Snippets: Vue 代码提示（可选）

查看 VS Code 版本：

$ code -v
1.46.1
cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
x64

Node.js

Node.js 开发环境，下载地址： https://nodejs.org/en/download/ 。

建议选择 Latest LTS Version ，因为 Electron v9 仍旧使用的 Node.js v12 。

查看 Node, NPM 版本：

$ node -v
v12.18.1

$ npm -v
6.14.5

Yarn

Yarn 包管理工具，相比 NPM 而言： Fast, Reliable, Secure 。

GitHub: https://github.com/yarnpkg/yarn

全局安装 Yarn ：

npm config set registry https://registry.npm.taobao.org
npm install -g yarn

查看 Yarn 版本：

$ yarn -v
1.22.4

Vue CLI

Vue CLI 是 Vue.js 开发的标准工具。

GitHub: https://github.com/vuejs/vue-cli

全局安装 Vue CLI ：

yarn global add @vue/cli

查看 Vue CLI 版本：

$ vue -V
@vue/cli 4.4.6

创建 Vue.js 应用

vue create my-app

跟随引导进行工程配置，如下：

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pi