本文为 Electron-Vue 创建项目到发布的关键流程，其中一些命令如果报错，应该是缺少一些环境导致的错误，针对错误进行相应的环境安装即可。
一、必备基础环境安装
检查基础环境：
# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -v
基础环境官方文档
二、创建一个 Electron-Vue 项目
执行以下命令创建第一个 Electron-Vue 项目，vue-cli 如果已经安装过了的话，就不必再次安装了。（建议到自己创建的目录后执行，它会为你创建项目文件夹）
# 全局安装vue-cli
npm install -g vue-cli
# 使用vue-cli创建electron-vue手脚架项目
vue init simulatedgreg/electron-vue my-project
耐心的等待一段时间（可能需要梯子），就可以直接运行应用了。
# 安装依赖
$ cd my-project
$ npm install
# 运行程序
npm run dev
运行成功，如果中途有出现报错，对相应的错误进行搜索引擎检索解决。一般都是缺失环境导致。
附：Electron-Vue 文档
网上找了几种方式，让修改 webpack.renderer.config.js 和 webpack..config.js 都不太好使，应该是由于不同的版本造成的。这里给出一种我目前（2020-10-19）配置的最新环境，可以解决的方案：
解决方案地址：https://github.com/SimulatedGREG/electron-vue/issues/871#issuecomment-564302194
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vest</title>
<% if (htmlWebpackPlugin.options.nodeModules) { %>
<!-- Add `node_modules/` to global paths so `require` works properly in development -->
<script>
require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
</script>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<% if (!require('process').browser) { %>
<script>
if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<% } %>
<!-- webpack builds are automatically injected -->
</body>
</html>
以上代码，覆盖到 index.ejs 文件即可。
运行效果
我的配置：
{
"workbench.colorTheme": "One Dark Pro",
"editor.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"search.followSymlinks": false,
"git.autorefresh": false,
"explorer.confirmDelete": false,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"workbench.sideBar.location": "left",
"editor.largeFileOptimizations": false,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
}
以上配置，你需要安装（我这里使用了一个VSCode的皮肤，可自行去掉）：
- HookyQR.beautify
- One Dark Pro