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 徐晓伟 <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):
    在 .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,
            };
          },
  • 0
    点赞
  • 4
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值