2. 起步

脚手架

该样板代码被构建为 vue-cli 的一个模板,并且包含多个选项,可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器,因为它可以更好地处理依赖关系,并可以使用 yarn clean 帮助减少最后构建文件的大小。

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

关于 electron

虽然是可选的,仍旧我们建议在创建项目之后锁定你 electron 的版本。这样可以防止在同一项目上工作的其他开发者使用不同的版本进行开发。electron 经常发布新版本,所以一些功能特性总是会发生相应的变化。更多信息

Windows 用户注意事项

如果在 npm install 期间遇到关于 node-gyp 的错误,那么你很有可能没有在你的系统上安装正确的构建工具。构建工具包括 Python 和 Visual Studio 等等。感谢 @felixrieseberg,有几个软件包可以帮助简化此过程。

我们需要检查的第一项是 npm 的版本,并确保它是最新的。这个可以使用 npm-windows-upgrade 来完成。如果你使用 yarn,则可以跳过此项检查。

若上一项检查完成,我们可以继续设置所需的构建工具。使用 windows-build-tools 来为我们完成大部分烦人的工作。全局安装此工具将依次设置 Visual C++ 软件包、Python 等等。

到现在为止,所有工具都应该成功安装了,如果没有,那么你就会需要安装一个干净的 Visual Studio。请注意,这些并不是 electron-vue 自身的问题 (Windows 有时候可能会很难用 ¯_(ツ)_/¯)。

下一节:该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。