怎么用vuecli創(chuàng)立一個(gè)vue工程

這篇文章主要介紹“怎么用vuecli創(chuàng)立一個(gè)vue工程”，在日常操作中，相信很多人在怎么用vuecli創(chuàng)立一個(gè)vue工程問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用vuecli創(chuàng)立一個(gè)vue工程”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

安裝electron-builder

vue add electron-builder
// 安裝的東西很多，注意網(wǎng)絡(luò)
// 可以先安裝cnpm install --save-dev electron-chromedriver
// 本人安裝時(shí)，報(bào)了很多錯(cuò)，后來隔天新建了個(gè)工程，一下子就安裝成功了

安裝成功后，運(yùn)行npm run electron:serve，假如出現(xiàn)以下頁面，說明成功了

打包桌面應(yīng)用

// 執(zhí)行下面的命令就可
npm run electron:build
//在dist_electron目錄下會(huì)發(fā)現(xiàn)一個(gè)exe，雙擊這個(gè)exe會(huì)執(zhí)行安裝程序。
//還有一個(gè)win-unpacked文件夾，里面是我們之前打包的模式，點(diǎn)擊里面的electron-vue-my.exe，就可運(yùn)行

Electron 配置

常規(guī)的配置基本上都在background.js中

取消跨域限制

win = new BrowserWindow({  width: 800,  height: 600,  webPreferences: {    nodeIntegration: true,    webSecurity: false  }})

設(shè)置窗口圖標(biāo)

準(zhǔn)備windows和macOS兩版圖標(biāo)。

• windows: app.ico 最小尺寸：256x256

• macOS: app.png或者app.icns 最小尺寸：512x512
  把圖標(biāo)文件放到public目錄下：

|- /dist_electron  （略）|- /public   |- app.icns     |- app.ico   |- app.png   |- favicon.ico   |- index.html|- /src  （略）|- .editorconfig    |- .eslintrc.js|- .gitignore|- babel.config.js|- package.json|- package-lock.json|- README.md

圖標(biāo)生成

1. 安裝組件，cnpm install --save-dev electron-icon-builder

2. 準(zhǔn)備好你的圖標(biāo)，放到/public/icon.png

3. 在package.json的scripts下新添加一條命令
   "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

4. 執(zhí)行，npm run electron:generate-icons，生成一系列圖標(biāo)，把圖標(biāo)復(fù)制到public目錄。

打包配置

修改vue.config.js，這里我就把修改的部分放出來：

module.exports = {    pluginOptions: {      electronBuilder: {        builderOptions: {          "appId": "com.wangdaodao.app",          "productName": "AppDemo ", //項(xiàng)目名，也是生成的安裝文件名          "copyright": "Copyright ? 2020", //版權(quán)信息          "directories": {            "output": "./dist_electron" //輸出文件路徑          },          "win": { //win相關(guān)配置            "icon": "./public/icons/icon.ico", //圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個(gè)坑            "target": [              {                "target": "nsis", //利用nsis制作安裝程序                "arch": [                  "x64", //64位                  "ia32" //32位                ]              }            ]          },          "mac": {            "icon": "./public/icons/icon.icns"          },          "nsis": {            "oneClick": false, // 能否一鍵安裝            "allowElevation": true, // 允許請(qǐng)求提升。 假如為false，則客戶必需使用提升的權(quán)限重新啟動(dòng)安裝程序。            "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄            "installerIcon": "./public/icons/icon.ico", // 安裝圖標(biāo)            "uninstallerIcon": "./public/icons/icon.ico", //卸載圖標(biāo)            "installerHeaderIcon": "./public/icons/icon.ico", // 安裝時(shí)頭部圖標(biāo)            "createDesktopShortcut": true, // 創(chuàng)立桌面圖標(biāo)            "createStartMenuShortcut": true, // 創(chuàng)立開始菜單圖標(biāo)            "shortcutName": "AppDemo", // 圖標(biāo)名稱          },        }      }    }}

打包APP

npm run electron:build

刪除dist_electron文件夾，重新執(zhí)行打包命令，npm run electron:build，會(huì)發(fā)現(xiàn)應(yīng)用的圖標(biāo)變了
最終在dist_electron目錄下生成build后的產(chǎn)品。

/dist_electron|- /bundled  （略）|- /win-unpacked  <-- 綠色版  （略）|- AppDemo Setup 0.1.0.exe  <-- 安裝文件|- AppDemo Setup 0.1.0.exe.blockmap|- builder-effective-config.yaml|- index.js

到此，關(guān)于“怎么用vuecli創(chuàng)立一個(gè)vue工程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！