a. 当然, 卸载命令还是要执行的: 全局卸载：npm uninstall vue-cli -g;
b. npmrc文件删除掉
c. 检索删除vue-cli文件夹
再试试: vue -V，就不显示版本号了。
（3）可以忽略上述问题，直接安装最新版本的vue-cli3即可（亲测有效）。
执行以下命令全局安装vue-cli3：
$ cnpm install @vue/cli -g
执行以下命令升级vue-cli3：
$ cnpm update @vue/cli -g
1.5 创建vue项目
在指定目录下，打开终端，执行以下命令，创建vue项目：
$ vue create electron-vue-demo
这里的项目名称为electron-vue-demo（不能出现大写字母），可根据自己的具体项目改变。
创建命令执行后，在完成创建之前，会出现以下选项（如果熟悉此步骤可跳过本节内容）：
1 2 3 4
Vue CLI v4.4.6 ? Please pick a preset: (Use arrow keys) default (babel, eslint) > Manually select features
选择 Manually select features （自定义安装）。
1 2 3 4 5 6 7 8 9 10 11
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
这里选择了常用的模块，请根据实际需求进行选择。
1 2
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)n
// Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win
// Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ])
functioncreateWindow() { // Create the browser window. win = new BrowserWindow({ width: 1000, height: 600, webPreferences: { /* Use pluginOptions.nodeIntegration, leave this alone See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION */ webSecurity: false, nodeIntegration: true } })
if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') }
win.on('closed', () => { win = null }) }
// Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } })
app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow() } })
// This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installVueDevtools() } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() })
// Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', (data) => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } }
以上代码是1.6小节使用自动化方式安装后生成的。
安装依赖包
在项目目录下执行以下命令，安装全部依赖包：
$ cnpm install
1.8 编译并启动APP
执行以下命令，开始编译APP，并启动开发环境APP：
$ npm run electron:serve或$ yarn electron:serve
首次启动可能会等待很久，加载完后会自动打开APP，等待即可。
编译成功后，就会出现开发环境的APP了，如下图（Win10启动界面）：
当回到控制台，发现控制台的信息：
1 2 3 4 5 6 7
INFO Launching Electron... Failed to fetch extension, trying 4 more times Failed to fetch extension, trying 3 more times Failed to fetch extension, trying 2 more times Failed to fetch extension, trying 1 more times Failed to fetch extension, trying 0 more times Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
win = new BrowserWindow({ width: 1000, height: 600, webPreferences: { /* Use pluginOptions.nodeIntegration, leave this alone See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info */ nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION } })
3.3 取消跨域限制
修改background.js：
1 2 3 4 5 6 7 8 9 10 11 12 13
win = new BrowserWindow({ width: 1000, height: 600, webPreferences: { /* Use pluginOptions.nodeIntegration, leave this alone See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION */ webSecurity: false, nodeIntegration: true } })
