Electron Vue 项目搭建

徐晓伟

已于 2022-10-20 10:10:39 修改

阅读量681

点赞数

文章标签： electron-vue electron vue

于 2020-02-23 13:48:53 首次发布

本文链接：https://blog.csdn.net/qq_32596527/article/details/104455175

版权

查看 node 版本：

node -v

C:\Users\xuxiaowei>node -v
v12.16.0

C:\Users\xuxiaowei>

设置组件路径与缓存路径：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

设置淘宝源与安装淘宝cnpm：

npm config set registry=https://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝 cnpm 全局安装 vue cli：
```
cnpm install -g @vue/cli
```
使用淘宝 cnpm 全局安装 electron：
```
cnpm install -g electron
```
使用淘宝 cnpm 全局安装 vue cli-init：
```
cnpm install -g @vue/cli-init
```

创建项目：
项目名：Electron-Vue

vue init simulatedgreg/electron-vue Electron-Vue

程序名称？
名称不能有大写：
```
? Application Name electron-vue
```
ID？
```
? Application Id cn.com.xuxiaowei
```
版本号？
```
? Application Version 0.0.1
```

项目描述？

? Project description 一个 Electron Vue 项目

```
? Use Sass / Scss? No
```

选择使用 Vue 组件？

? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron

使用 ESLint？
```
? Use linting with ESLint? Yes
```

ESLint 风格？
参见：
Standard Airbnb

? Which ESLint config would you like to use? Standard

? Set up unit testing with Karma + Mocha? No

? Set up end-to-end testing with Spectron + Mocha? No

electron-builder
electron-packager

? What build tool would you like to use? builder

? author 徐晓伟 <xuxiaowei@xuxiaowei.com.cn>

安装组件：
进入项目文件夹：
```
E:\GitHub>cd Electron-Vue
E:\GitHub\Electron-Vue>
```
使用淘宝 cnpm 安装组件：
```
cnpm install
```
运行项目：
```
npm run dev
```

可能会报错：

Html Webpack Plugin:
  ReferenceError: process is not defined
  
  - index.ejs:11 eval
    [.]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
  
  - index.ejs:16 module.exports
    [.]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3
  
  - index.js:284 
    [Electron-Vue]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/index.js:284:18
  
  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

解决办法（参见：Webpack ReferenceError: process is not defined · Issue #871 · SimulatedGREG/electron-vue · GitHub）：
在 .electron-vue/webpack.renderer.config.js 中，新增：

    templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },