Electron Vue 项目搭建

柔光的暖阳◎ 2023-07-07 11:25 12阅读 0赞

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 徐晓伟 <xuxiaowei@xuxiaowei.com.cn>
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
            [.]/[_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
    
    解决办法（参见：[https://github.com/SimulatedGREG/electron-vue/issues/871][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,
                };
              },

[Standard]: https://github.com/feross/standard
[Airbnb]: https://github.com/airbnb/javascript
[electron-builder]: https://github.com/electron-userland/electron-builder
[electron-packager]: https://github.com/electron-userland/electron-packager
[https_github.com_SimulatedGREG_electron-vue_issues_871]: https://github.com/SimulatedGREG/electron-vue/issues/871