electron vue項目搭建 · electron summary

## 環境準備 * node.js（[官網地址](https://nodejs.org/en/)） * vue-cli 3.x （[官網地址](https://cli.vuejs.org/zh/guide/installation.html)） * 一個熟悉的代碼編輯器 ## 初始化項目 vue create vue-electron-demo ``` ?????Vue CLI v3.8.4 ????? Please pick a preset: (Use arrow keys) ??????default (babel, eslint)? ????> Manually select features ``` 選擇“Manually select features” (自定義安裝)。 ``` ? Check the features needed for your project: ?????(*) Babel ?????( ) TypeScript ?????( ) Progressive Web App (PWA) Support ?????(*) Router ?????(*) Vuex ?????(*) CSS Pre-processors ?????(*) Linter / Formatter ????>( ) Unit Testing ?????( ) E2E Testing ``` 這里選擇了常用的模塊，請根據實際需求進行選擇。 ``` ? Use history mode for router? (Requires proper server setup for index fallback? ????in production) (Y/n)??n ``` 如果選擇了router，這里會詢問是否使用history模式。 vue-router 默認使用hash模式（即通過url#hash來跳轉頁面），使用URL的hash來模擬一個完整的 URL，當URL改變時，頁面不會重新加載。如果使用history，URL就像正常的url，例如 yoursite.com/user/id ，比較好看。但是還需要后臺配置支持。這里我們選擇“n”。 ``` ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): ??????Sass/SCSS (with dart-sass) ??????Sass/SCSS (with node-sass) ????> Less ??????Stylus ``` 選擇CSS預處理模塊，這里我們使用“Less”。 ``` ? Pick a linter / formatter config: ??????ESLint with error prevention only ??????ESLint + Airbnb config ????> ESLint + Standard config ??????ESLint + Prettier ``` 選擇ESLint代碼格式檢查工具的配置，選擇“ESLint + Standard config”，標準配置。 ``` ? Pick additional lint features: (Press to select, to toggle all, to invert selection) ????>(*) Lint on save ?????( ) Lint and fix on commit ``` Line on save表示在保存代碼的時候，進行格式檢查。 Lint and fix on commit表示在git commit的時候自動糾正格式。這里只選擇“Lint on save”。 ``` ? Where do you prefer placing config for Babel, ESLint, etc.? ??????In dedicated config files ????> In package.json ``` 這里問把 babel, eslint 這些配置文件放哪？ In dedicated config files 表示獨立文件 In package.json 表示放在package.json里這里選擇“In package.json”。 ``` ? Save this as a preset for future projects? (y/N) N ``` 然后耐心等待項目安裝完成 ## 安裝electron 進入項目根目錄，執行`vue add electron-builder` 此過程較慢，需耐心等待，或嘗試手動安裝可參考[鏈接](https://juejin.im/post/5d1abff7f265da1bb80c47e3#heading-7) 執行以下命令，開始編譯APP，并啟動開發環境APP： `npm run electron:serve` 編譯成功后，就會出現開發環境的APP了。 ![](https://img.kancloud.cn/43/54/4354d6cd5906ac96b000c0fd3c9a3ef3_800x600.png) ## 打包項目進入項目根目錄，執行`npm run electron:build` 打包后的目錄為：`demo-vue-electron\\dist\_electron`，其中demo-vue-electron Setup 0.1.0.exe為安裝包，win-unpacked目錄中有可直接執行的.exe ![](https://img.kancloud.cn/63/f3/63f355995f9511235477c3f78456e9cf_631x241.png) ## 配置項目配置ESLint代碼格式檢查工具在項目根目錄下創建.eslintrc.js （注意文件名前面有個“.”） ``` module.exports = { ??????root: true, ??????env: { ???? node: true ??????}, ??????'extends': [ ???? 'plugin:vue/essential', ???? '@vue/standard' ??????], ??????rules: { ????'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', ????// 不檢測語句末尾的分號 ????'semi': ['off', 'always'], ????// 強制縮進為2個空格 ????'indent': ['error', 2], ????// 關閉函數名稱跟括號之間的空格檢測 ????'space-before-function-paren': 0, ????// 忽略大括號內的空格 ????'object-curly-spacing': 0 ??????}, ??????parserOptions: { ???? parser: 'babel-eslint' ??????} ????} ``` [更多配置參考](https://cloud.tencent.com/developer/section/1135570) 配置vue 在項目根目錄下創建vue.config.js，粘貼以下代碼： ``` const path = require('path'); ????function resolve (dir) { ??????return path.join(__dirname, dir); ????} ????module.exports = { ??????publicPath: './', ??????devServer: { ????// can be overwritten by process.env.HOST ????host: '0.0.0.0',?? ????port: 8080 ??????}, ??????chainWebpack: config => { ????config.resolve.alias ??????.set('@', resolve('src')) ??????.set('src', resolve('src')) ??????.set('common', resolve('src/common')) ??????.set('components', resolve('src/components')); ??????} ????}; ``` [更多配置參考](https://cli.vuejs.org/zh/config/)