Electron + Vue + Vscode构建跨平台应用(二)Electron + Vue环境搭建

Electron + Vue + Vscode构建跨平台应用(一)知识点补充

  1. 配置Vue.js解释环境:Node.js的安装与配置

  首先从Node官网下载Node最新版本,后续介绍中Node的版本为 v6.11.3, 地址为:Node v6.11.3 下载地址, 开发平台为windows ;
在这里插入图片描述

一路Next就完成了Node.js的安装;笔者Node.js安装目录为: D:\SoftWare\NodeJs;

然后在环境变量Path中添加Node.js的可执行路径
在这里插入图片描述

配置完成之后,当然要测试下Node是否安装成功,在cmd命令行中使用 node -v,如果出现对应版本号,则表示安装成功
在这里插入图片描述

  1. 配置npm或者cnpm

   我们在开发的时候,经常会引用第三方的内容,那是不是我们需要知道每一个第三方包的具体位置,然后去下载打开?
   为了解决这个问题,npm 官网 便产生了,他是一个Node.js下的包管理工具,通过这个工具你就可以下载任意一个第三方内容,而不必关系他在哪了,更奇妙的是,如果模块A和模块B有依赖关系,通过npm可以把所有依赖的包都下载下来并管理起来;
   但是因为受到服务器影响(被墙),所以无敌的淘宝制作了cnpm,cnpm官网,cnpm是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
   我们安装的Node.js中已经自带了npm,我们可以通过cmd命令测试npm是否安装成功
在这里插入图片描述

不过为了后续方便引入其他模块,我还是决定使用cnpm;他的安装只需要执行如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后,执行cnpm -v查看是否安装成功
在这里插入图片描述

  1. npm/cnpm命令

  在后续的开发过程中,我们需要使用cnpm去下载其他模块,所以我们有必要掌握cnpm的一些命令,因为cnpm是npm的镜像,所以你可以像使用npm命令一样使用cnpm

   2.1 安装Node模块 : npm install moduleNames
   安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块。
node的安装分为全局模式和本地模式。一般情况下会以本地模式运行,包会被安装到和你的应用程序代码的本地node_modules目录下。在全局模式下,Node包会被安装到Node的安装目录下的node_modules下。全局安装命令为$npm install -g moduleName。

   2.2 查看安装模式:npm get global
通过该命令查看本机的安装模式是不是全局安装,如果显示为false,则表示为本地安装
在这里插入图片描述

   2.3 设定安装模式 npm set global=true

   2.4 卸载指定安装模块 npm uninstall sax

  疑问:在一个项目中,我把代码提交到Git上,别人Clone下来之后,怎么知道我需要下载哪些依赖库

   我们clone代码之后,你会发现是没有node_modules这个文件夹的,node_modules用来保存依赖库,此时我们就需要通过npm install来下载依赖库,但是需要下载哪些库,这时候就需要定义package.json,配置好dependencies和devDepencies,这样其他同学在执行install命令的时候,就可以下载对应的依赖库了
在这里插入图片描述

   更多的命令行请参考 npm命令行

  1. 安装配置 vue-cli

   vue-cli是为了帮助我们快速构建Vue项目用的

cmd命令行下执行(下面命令是全局安装)

cnpm install --global vue-cli

在这里插入图片描述
待安装完成之后,输入vue,如果提示如下则表明安装成功
在这里插入图片描述

  1. 安装配置Electron

  Electron就像套在Vue项目外的一个壳子,他的存在使得你的Vue可以运行在浏览器中
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目
Electron 兼容 Mac, Windows 和 Linux, 它构建的应用可在这三个操作系统上面运行

Electron官网

执行下面命令进行安装,通过如下命令就可以把Electron引入到Vue项目中(在$PATH 中全局安装 electron)

cnpm install -g electron

安装成功后执行:electron -v 查看一下是否安装成功

在这里插入图片描述

  1. 安装配置Vscode

前面几个步骤我们完成了开发搭建Vue项目的环境配置,这里我们选用Vscode作为Vue项目的IDE

Vscode官网

首先下载Vscode
在这里插入图片描述

下载完成之后,一路Next完成安装;

   配置Vscode

 6.1 设置中文

  在商店里面下载Chinese (Simplified) Language Pack for Visual Studio Code插件进行安装
在这里插入图片描述
   使用快捷键在Ctrl+Shift+p 打开命令面板 输入“config” 进入locale.json,将locale.json修改为"locale":“zh-cn”
在这里插入图片描述
在这里插入图片描述

 6.2 设置Vscode快捷键和Eclipse一致

   在商店里面下载eclipse key map插件安装即可


 6.3 如何离线下载vs插件

   首先通过访问vscode商店,搜索所需插件,此处以安装vetur为例
在这里插入图片描述
   然后点击右边的Download Extension下载对应的离线安装包,文件格式为:xxxxx.vsix

   最后点击应用商店图标,选择 Install from VSIX, 之后选择你刚保存的文件即可完成安装,如果你发现当前安装失败,请确认下安装包和IDE版本是否适配,一般将IDE更新到最新即可
在这里插入图片描述

 6.4 如何查看已经安装的插件信息
点击应用商店图标,选择show installed Extensions选项,IDE自动会列出当前已安装列表
在这里插入图片描述

 6.5 vscode常用插件推荐

  1. 中文汉化包 : Chinese (Simplified) Language Pack for Visual Studio Code,
  2. 个性化文件夹图标: vscode-icons
  3. HTML 代码提示插件: HTML Snippets
  4. eclipse快捷键映射: HTML Snippets
  5. git历史记录查看: Git History
  6. js代码提示:JavaScript (ES6) code snippets
  7. 语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持: Vetur
  • 1
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron是一个基于Chromium和Node.js的框架,可以帮助开发者使用Web技术(HTML,CSS,JavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装ElectronVueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理ElectronVueCli。 2. 安装Electron 在安装Electron之前,需要先创建一个空目录作为项目根目录,然后在命令行中切换到该目录下,执行以下命令: ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件,并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件,这是Electron应用的主进程文件。在main.js中添加以下代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口,并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli: ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用: ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录,并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件,并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用: ``` npm run build ``` 以上命令会生成一个名为dist的子目录,并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用: ``` npm start ``` 以上命令会启动Electron应用,并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用,你可以使用Web技术来构建跨平台桌面应用程序,为用户提供更好的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值