electron-vue创建项目

一、electron-vue 条件

1. 需要使用 node@^7 或更高版（除老项目外，对大多数人来说不是问题）
2. 适用于 vue-cli@2.x 创建项目（不兼容 vue-cli@3.x 或以上版本）
3. 推荐用yarn安装依赖，避免后期运行打包错误

二、项目搭建

# 安装 vue-cli@2.x
yarn global add vue-cli
 
# 安装：脚手架样板代码
vue init simulatedgreg/electron-vue electron-project
 
# 设置应用名称 - my-project
Application Name (my-project)
 
# APP 的 ID 建议为 com.公司名.应用名 - com.example.yourapp
Application Id (com.example.yourapp)
 
# APP 版本 - 0.0.1   
Application Version (0.0.1)
 
# 项目描述 - An electron-vue project
Project description (An electron-vue project)
 
# 是否使用 Sass 或 Scss - Yes
Use Sass / Scss? (Y/n)
 
# 选择需要使用的 Vue 插件/依赖 - axios, vue-electron, vue-router, vuex, vuex-electron
? Select which Vue plugins to install (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ axios
 ◉ vue-electron
 ◉ vue-router
 ◉ vuex
 ◉ vuex-electron
 
# 使用 ESLint 语法检测 - Yes
? Use linting with ESLint? (Y/n)
 
# 选择 ESLint 语法检测规则 - Standard
? Which ESLint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
 
# 是否使用 Karma + Mocha 单元测试 - No
? Set up unit testing with Karma + Mocha? (Y/n)
 
# 是否使用 Spectron + Mocha 端到端测试 - No
? Set up end-to-end testing with Spectron + Mocha? (Y/n)
 
# 选择打包工具（builder 更轻量） - electron-builder
? What build tool would you like to use? (Use arrow keys)
❯ electron-builder (https://github.com/electron-userland/electron-builder)
  electron-packager (https://github.com/electron-userland/electron-packager)
 
# 项目作者 - 自定义
? author (Ryan Zhong <hi@bluesdream.com>)

三、项目运行

# 进入项目
cd electron-project

# 通过 yarn 安装依赖
yarn install

# 运行项目
yarn run dev

#若报错在文件夹.electron-vuex下找到webpack.renderer.config.js和webpack.web.config.jsx修改plugins修改后
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    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
    }),
    new webpack.DefinePlugin({
      'process.env.IS_WEB': 'true'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

# 项目编译
yarn run build

若打包后报错找不到文件
	1、在package.json中找到build下加入asar:false