Electron-Vue 01:项目初始化

因业务需要开了新坑，选型为Electron-Vue，发展到现在比较成熟了，但是没想到项目初始化都启动不了，把一些小坑记录下来。

Get Started

安装vue-cli

npm install -g vue-cli

通过vue-cli初始化项目模版

vue init simulatedgreg/electron-vue my-project

安装依赖并运行开发模式

cd my-project
yarn # or npm install
yarn run dev # or npm run dev

ReferenceError: process is not defined

进行到这里，跑不起来就对了，会报ReferenceError: process is not defined，原因是webpack配置有问题，我们修改项目目录下的 ./electron-vue 下的webpack.renderer.config.js和webpack.web.config.js的HtmlWebpackPlugin配置为：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  templateParameters(compilation, assets, options) {
    return {
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        files: assets,
        options: options
      },
      process,
    };
  },
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: false
}),

axios is not defined

改毕再yarn dev一下就可以解锁第二关axios is not defined，这里很容易联想到依赖安装不完整的问题，如果你尝试安装依赖的话会发现错误没有变化，后经过搜索发现插件白名单没有配置。

接着修改webpack.renderer.config.js

let whiteListedModules = ['vue','axios','vue-electron','vue-router','element-ui','vuex-electron','vuex']

把所需要的依赖加上即可，进行到这里项目终于可以跑起来了，文章写到这里不忍结束，接着我们迎来第三关：eslint

eslint vscode代码格式化

在使用vue-cli进行项目初始化的时候，我选择了Javascript Standard Style作为代码风格校验，很多人会不堪其扰选择关闭，但其实一个合适的代码风格在团队协作中是很有必要的，至于烦人的红波浪提醒，我们大可交给code formatter去帮我们格式化代码。
首先安装vscode拓展 Prettier-Standard - JavaScript formatter，并于vscode首选项中打开editor.formatOnSave即可愉快地匹配项目代码风格。

后记

以上是我花了一天时间踩的坑，后续伴随项目发展，本系列文章将会同步更新，感谢观看～