Electron Vue 項目搭建

1. 查看 node 版本：

   node -v

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

2. 設置組件路徑與緩存路徑：

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

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

3. 設置淘寶源與安裝淘寶cnpm：

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

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

4. 使用淘寶 cnpm 全局安裝 vue cli：

   cnpm install -g @vue/cli

5. 使用淘寶 cnpm 全局安裝 electron：
    

   cnpm install -g electron

6. 使用淘寶 cnpm 全局安裝 vue cli-init：

   cnpm install -g @vue/cli-init

7. 創建項目：
   項目名：Electron-Vue

   vue init simulatedgreg/electron-vue Electron-Vue

    
   1. 程序名稱？
      名稱不能有大寫：

      ? Application Name electron-vue

   2. ID？

      ? Application Id cn.com.xuxiaowei

   3. 版本號？

      ? Application Version 0.0.1

   4. 項目描述？

      ? Project description 一個 Electron Vue 項目

   5.  

      ? Use Sass / Scss? No

   6. 選擇使用 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

   7. 使用 ESLint？

      ? Use linting with ESLint? Yes

   8. ESLint 風格？
      參見：
      Standard
      Airbnb

      ? Which ESLint config would you like to use? Standard

   9.  

      ? Set up unit testing with Karma + Mocha? No

   10.  

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

   11. 
       electron-builder
       electron-packager 

       ? What build tool would you like to use? builder

   12.  

       ? author 徐曉偉 <[email protected]>

8. 安裝組件：
   進入項目文件夾：

   E:\GitHub>cd Electron-Vue
   E:\GitHub\Electron-Vue>

   使用淘寶 cnpm 安裝組件：

   cnpm install

9. 運行項目：

   npm run dev

10. 可能會報錯：

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

    解決辦法（參見：https://github.com/SimulatedGREG/electron-vue/issues/871）：
    在 .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,
            };
          },