-
2021-11-02 09:19:47
Vue+electron-vue跨平台桌面应用开发实战教程(一)
前言
本文将带领大家使用Vue + electron-builder 搭建桌面应用。
使用到的工具:IDEA 2021、node
创建项目
1.快速安装Vue项目
通过Ctrl/Command+alt+S快捷键打开idea的 Settings(设置)页面,在左侧目录 Plugins(插件)中搜索 Vue。博主这边已经安装过,未安装的小伙伴可以点击Install ,为以后创建Vue项目,省了很多时间。
接下来直接新建项目,在JavaScript中选择Vue.js,点击下一步(Next),输入自己预设的项目名(Project name),点击完成(Finish)即可。之后项目会自动生成环境,等待即可。
通过idea左下角的Terminal(终端)输入【vue -V】命令,查看Vue版本信息。如果出现vue不是内部命令的话,
step1:配置路径
输入下面命令:
npm config get prefix
复制得到的路径信息,通过Win键+R键出现运行窗口,输入sysdm.cpl,找到高级->环境变量,
在系统变量中新建变量npm,变量值为之前复制到的路径,再在系统变量中找到path,添加%npm%,一直点击保存。
step2:安装cnpm
输入以下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步(最关键!)
输入以下命令:
npm i npm -g npm i @vue/cli -g
如果还报错也没关系,继续执行下面的命令:
cnpm i @vue/cli -g
出现All packages installed (used 6ms(network 2ms), speed 0B/s, json 0(0B), tarball 0B)就是成功啦!
再输入vue -V,能正常出现版本信息就是完美成功!2.集成electron
在Terminal(终端)输入以下命令:
vue add electron-builder
安装完 electron-builder 依赖之后,会出现选型情况,通过上下方向键选择最新版本即可。安装完成后会在src目录中生成background.js。
到此,所有的安装都已经完成。3.运行程序
运行以下命令
npm run electron:serve
启动时间比较就,并出现以下信息
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等待自动跳出桌面程序即可。
结尾
为精致而生,为慵懒而活
更多相关内容 -
适合前端Vue开发童鞋的跨平台Weex的使用详解
2021-01-19 20:58:07但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗?Weex 的开发效率、Weex 的质量是否满足需求? 一、开发环境 在这个 Weex app 开发中,我的开发环境相关配置如下: 工具名称 版本号 Node.js 8.2.1... -
vue+electron 跨平台桌面应用开发实战教程
2022-04-08 11:13:33一、创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么? 查看版本命令:vue --version 如果版本叫老,可以直接卸载,再安装最新版本 卸载命令:npm uninstall vue-cli -g 安装目录:npm ...一、创建项目
1.1 安装vue-cli
先查看是否已经安装了vue-cli,vue-cli的版本是什么?
查看版本命令:vue --version
如果版本叫老,可以直接卸载,再安装最新版本
卸载命令:npm uninstall vue-cli -g
安装目录:npm install @vue/cli -g
1.2 使用vue-cli创建项目
选取一个项目存放的路径,然后开始创建项目
创建项目命令:vue create raje-rebot-front
这里将项目名定为:raje-rebot-front
输入完上述命令之后进入vue项目的创建过程。出现以下内容
- 第一个选项是 “default” 默认(Vue3),只包含babel和eslint
- 第二个选项是 “default” 默认(Vue2),只包含babel和eslint
- 第三个选项是 “Manually select features”自定义安装
选择自定义安装,进入下一步选择
这里我们选择:
babel(高级的语法转换为低级的语法)
Router(路由)
Vuex(状态管理器)
CSS Pre-processors(css预处理器)
Linter / Formatter(代码风格、格式校验)
然后进入下一步
这步是选择vue.js使用的版本,这里选择2.x,接着进入下一步
这步是设置router是否使用history模式,这里选择n,接着进入下一步
这步是设置css预处理模块,这里选择 Stylus ,接着进入下一步
这步是选择ESLint代码检查工具的配置,这里选择ESLint + Standard config,接着进入下一步
这步是选择何时执行ESLint检查,这里选择保存时检查“Lint on save”,接着进入下一步
这步是询问 babel, postcss, eslint 这些配置是单独的配置文件还是放在package.json 文件中,这里选择“In package.json”,接着进入下一步
这步是询问以后创建项目的时候是否也采用同样的配置,这里选择N。
到目前为止,vue项目是创建完成了,我们等待项目下载依赖包,等项目构建完毕我们开始集成electron
1.3 使用electron-builder集成electron
进入项目根目录(raje-rebot-front),然后执行下列命令:vue add electron-builder
这步是选择Electron的版本,这里选择最新版本13.0.0,等待安装完成即可。
安装完成后会在src目录下生成background.js,并在package.json 文件中修main为:
"main": “background.js”
至此,所有的安装都已经完成了,接下来我们就可以运行程序看效果了。
1.4 运行程序
执行运行命令:npm run electron:serve
在启动的时候,会启动很久,并出现以下信息
这是在安装vuejs devtools,由于网络问题,一直安装不上,重试5次后会自动跳过并启动程序。
编译成功后,会自动弹出一个桌面程序,如下图所示
二、主进程常用配置
-
NativeScript跨平台移动端开发工具-其他
2021-06-12 01:57:19NativeScript使您可以直接从JavaScript访问本机...iOS平台的编译可以在远程完成,无需Mac电脑或iOS工具 开发工作可以在任意IDE中完成。 支持任意跨浏览器的JavaScript库。 支持CSS。 支持MVVM。 即时支持新的原生平台。 -
Vue+Electron开发跨平台桌面应用(实战)
2020-08-04 08:55:00来源 |xiangzhihong前言虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写...来源 | xiangzhihong
前言
虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上 Web 开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。
Electron 是一个基于 Chromium 和 Node.js,使用 HTML、CSS 和 JavaScript 来构建跨平台应用的跨平台开发框架,兼容 Mac、Windows 和 Linux。目前,Electron 已经创建了包括 VScode 和 Atom 在内的大量应用。
环境搭建
创建 Electron 跨平台应用之前,需要先安装一些常用的工具,如 Node、vue 和 Electron 等。
安装 Node
进入 Node 官网下载页 http://nodejs.cn/download/,然后下载对应的版本即可,下载时建议下载稳定版本。如果安装 Node 使用 Homebrew 方式,建议安装时将 npm 仓库镜像改为淘宝镜像,如下所示。
npm config set registry http://registry.npm.taobao.org/ 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
安装/升级 vue-cli
先执行以下命令,确认下本地安装的 vue-cli 版本。
vue -V
如果没有安装或者不是最新版,可以执行以下命令安装/升级。
npm install @vue/cli -g
安装 Electron
使用如下命令安装 Electron 插件。
npm install -g electron 或者 cnpm install -g electron
为了验证是否安装成功,可以使用如下的命令。
electron --version
创建运行项目
Electron 官方提供了一个简单的项目,可以执行以下命令将项目克隆到本地。
git clone https://github.com/electron/electron-quick-start
然后在项目中执行如下命令即可启动项目。
cd electron-quick-start npm install npm start
启动后项目的效果如下图。
除此之外,我们可以使用 vue-cli 脚手架工具来创建项目。
vue init simulatedgreg/electron-vue
然后根据下面的提示一步步选中选项即可创建项目,如下所示。
然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示。
Electron 源码目录
Electron 的源代码主要依据 Chromium 的拆分约定被拆成了许多部分。为了更好地理解源代码,您可能需要了解一下 Chromium 的多进程架构。
Electron 源码目录结构和含义具体如下:
Electron ├──atom - Electron 的源代码 | ├── app - 系统入口代码 | ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西,它会告诉渲染进程如何管理页面 | | ├── lib - 主进程初始化代码中 JavaScript 部分的代码 | | ├── ui - 不同平台上 UI 部分的实现 | | | ├── cocoa - Cocoa 部分的源代码 | | | ├── gtk - GTK+ 部分的源代码 | | | └── win - Windows GUI 部分的源代码 | | ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面 | | ├── api - 主进程 API 的实现 | | | └── lib - API 实现中 Javascript 部分的代码 | | ├── net - 网络相关的代码 | | ├── mac - 与 Mac 有关的 Objective-C 代码 | | └── resources - 图标,平台相关的文件等 | ├── renderer - 运行在渲染进程中的代码 | | ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码 | | └── api - 渲染进程 API 的实现 | | └── lib - API 实现中 Javascript 部分的代码 | └── common - 同时被主进程和渲染进程用到的代码,包括了一些用来将 node 的事件循环 | | 整合到 Chromium 的事件循环中时用到的工具函数和代码 | ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码 | └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施 | └── lib - API 实现中 Javascript 部分的代码 ├── chromium_src - 从 Chromium 项目中拷贝来的代码 ├── docs - 英语版本的文档 ├── docs-translations - 各种语言版本的文档翻译 ├── spec - 自动化测试 ├── atom.gyp - Electron 的构建规则 └── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
平时开发时,需要重点关注的就是 src、package.json 和 appveyor.yml 目录。除此之外,其他需要注意的目录如下:
script - 用于诸如构建、打包、测试等开发用途的脚本
tools - 在 gyp 文件中用到的工具脚本,但与 script 目录不同, 该目录中的脚本不应该被用户直接调用
vendor - 第三方依赖项的源代码,为了防止人们将它与 Chromium 源码中的同名目录相混淆, 在这里我们不使用 third_party 作为目录名
node_modules - 在构建中用到的第三方 node 模块
out - ninja 的临时输出目录
dist - 由脚本 script/create-dist.py 创建的临时发布目录
external_binaries - 下载的不支持通过 gyp 构建的预编译第三方框架
应用工程目录
使用 electron-vue 模版创建的 Electron 工程结构如下图。
和前端工程的项目结构类似,Electron 项目的目录结构如下所示:
electron-vue:Electron模版配置。
build:文件夹,用来存放项目构建脚本。
config:中存放项目的一些基本配置信息,最常用的就是端口转发。
node_modules:这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件。
src:这个目录下存放项目的源码,即开发者写的代码放在这里。
static:用来存放静态资源。
index.html:则是项目的首页、入口页,也是整个项目唯一的HTML页面。
package.json:中定义了项目的所有依赖,包括开发时依赖和发布时依赖。
对于开发者来说, 90% 的工作都是在 src 中完成,src 中的文件目录如下。
Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。
1、主进程
Electron 运行 package.json 的 main 脚本(background.js)的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
2、渲染进程
由于 Electron 使用了 Chromium 来展示 Web 页面,所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 Web 页面运行在它自己的渲染进程中。在普通的浏览器中,Web 页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。然而 Electron 允许用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
3、主进程与渲染进程通信
主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。主进程管理所有的 Web 页面和它们对应的渲染进程。每个渲染进程都是独立的,它只关心它所运行的 Web 页面。
src 目录结构
在 Electron 目录中,src 会包包含 main 和 renderer 两个目录。
main 目录
main 目录会包含 index.js 和 index.dev.js 两个文件。
index.js:应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。
index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。
渲染进程
renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js。
assets:assets 下的文件如(js、css)都会在 dist 文件夹下面的项目目录分别合并到一个文件里面去。components:此文件用于存放应用开发的组件,可以是自定义的组件。router:如果你了解 vue-router,那么 Electron 项目的路由的使用方式和 vue-router 的使用方式类似。modules:electron-vue 利用 vuex 的模块结构创建多个数据存储,并保存在 src/renderer/store/modules 中。
相关案例
https://github.com/xiaozhu188/electron-vue-cloud-music
https://github.com/SmallRuralDog/electron-vue-music
❤️爱心三连击1.看到这里了就点个在看支持下吧,你的「在看」是我创作的动力。 2.关注公众号程序员成长指北,「带你一起学Node」! 3.添加微信【ikoala520】,拉你进技术交流群一起学习。 “在看转发”是最大的支持
-
27 个面向开发人员的最佳 Vue.js 开发工具
2022-04-01 00:05:59英文 | https://javascript.plainenglish.io/best-27-vuejs-development-tools-for-developers-bd972bb5f57301、BootstrapVue地址:...一个用于 Vue.js 构建引导接口的开源库。02、Vuex地址:https://vue...英文 | https://javascript.plainenglish.io/best-27-vuejs-development-tools-for-developers-bd972bb5f573
01、BootstrapVue
地址:https://bootstrap-vue.org/
一个用于 Vue.js 构建引导接口的开源库。
02、Vuex
地址:https://vuex.vuejs.org/
Vue.js 应用程序的状态管理库。
03、Vue Devtools
地址:https://devtools.vuejs.org/
一个调试 Vue.js 项目的简单工具。
04、Vue CLI
地址:https://cli.vuejs.org/
Vue.js 开发人员更简单的标准工具。
05、Vue Router
地址:https://router.vuejs.org/
直观而强大的语法定义静态和动态路由。
06、Vuetifyjs
地址:https://vuetifyjs.com/en/
帮助构建 Vue.js 的 Material Design 接口的开源库。
07、Nuxt
地址:https://nuxtjs.org/
一个开源框架,使Web开发变得简单而强大。
08、Vue Element Admin
地址:https://github.com/PanJiaChen/vue-element-admin
帮助构建具有管理网站所需的许多功能的简单管理界面。
09、Vue Apollo
地址:https://vue-apollo.netlify.app/
它可以帮助我们的 Vue.js 项目设置 GraphQL 变得更容易。
10、Element UI
地址:https://element.eleme.io/#/en-US
用于Vue项目界面开发的UI库。
11、Quasar
地址:https://quasar.dev/
Quasar 是一个开源的 Vue.js 框架,可帮助构建 SPA(单页应用)、SSR(服务器端渲染应用)、PWA(渐进式 Web 应用)。
12、Language Vue
地址:https://atom.io/packages/language-vue
支持 Atom 的 Vue.js 开发的实用程序。
13、VuePress
地址:https://v2.vuepress.vuejs.org/
VuePress 是一个以降价为中心的静态站点生成器。
14、Vue.js Guide
地址:https://vuejs.org/guide/introduction.html
Vue.js 开发人员最完整、最详细的指南。
15、Vue Select
地址:https://vue-select.org/
帮助我们构建具有对 Vue.js 开发人员有用的功能的组件。
16、Vueuse
地址:https://vueuse.org/
Vue 2 和 Vue 3 组件的必要实用程序集合。
17、VeeValidate
地址:https://vee-validate.logaretm.com/v4/
Vue.js 中的表单验证工具。
18、Vant
地址:https://vant-contrib.gitee.io/vant/#/en-US
移动 UI 的界面构建器库。
19、Vue Native
地址:https://vue-native.io/
帮助构建跨平台原生移动应用的 JavaScript 框架。
20、Vue-meta
地址:https://vue-meta.nuxtjs.org/
Vue.js 项目的 Cmeta 标签管理器。
21、Vue I18n
地址:https://kazupon.github.io/vue-i18n/
插件有助于为项目添加国际功能。
22、Vue Infinite Loading
地址:https://peachscript.github.io/vue-infinite-loading/
为网站创建无限滚动功能。
23、Gridsome
地址:https://gridsome.org/
该工具可以快速轻松地构建静态网站和应用程序。
24、Vite
地址:https://vitejs.dev/
Vite 是一个构建工具,旨在为现代 Web 项目提供更快、更精简的开发体验。
25、Vue-multiselect
地址:https://vue-multiselect.js.org/
帮助为网站构建多选功能的开源库。
26、Vetur
地址:https://marketplace.visualstudio.com/items?itemName=octref.vetur
用于在 VSCode 中更好地进行 Vue.js 开发和调试的扩展。
27、Vue.js Examples
地址:https://vuejsexamples.com/
Vue.js 接口开发中的示例集合。
总结
我希望这篇文章能为你的 Vue项目开发提供有用的开发工具,如果您有任何问题,请在留言区给我留言,我会尽快回复。
感谢您的阅读,祝你今天过得愉快!
学习更多技能
请点击下方公众号
-
MQTTX-使用Vue.js,Typescript和Electron构建的跨平台MQTT 5.0桌面客户端。-Vue.js开发
2021-05-27 21:19:31简体中文MQTT X是由EMQ开源的跨平台MQTT 5.0客户端工具,可以在macOS,Linux和Windows上运行,并支持MQTTX。 简体中文MQTT X是由EMQ开源的跨平台MQTT 5.0客户端工具,可以在macOS,Linux和Windows上运行,并支持格式... -
顶级 Vue.js 开发工具
2022-04-01 11:08:28Vue.js已成为当前最热门的JavaScript前端框架。Vue 是构建有用应用程序和网站的完美选择,无论你是经验丰富的开发人员,正希望切换到 Vue 上,还是刚刚开始工作的新人——选择正确的工具都是非常重要的。 -
使用Electron+Vue开发跨平台桌面应用
2021-08-31 10:07:50Electron是一个基于Chromium和 Node.js,使用 HTML、CSS和JavaScript来构建跨平台应用的跨平台开发框架,兼容 Mac、Windows 和 Linux。目前,Electron已经创建了包括VScode和Atom在内的大量应用。 环 -
Vue的开发常用的工具有哪些?
2022-03-24 17:37:09本节我们将对Vue的开发环境以及常用工具的使用进行讲解。 1.Visual Studio Code编辑器 Visual Studio Code(VS Code)是由微软公司推出的一款免费、开源的编辑器,推出之后便很快流行起来,深受开发者的青睐。作为前端... -
vue-cli-plugin-tauri:将您的Vue SPA变成轻量级的跨平台桌面应用程序
2021-04-28 00:52:07是用于通过Web前端创建更小,更快,更安全的桌面应用程序的工具包。 该插件将Tauri配置为可在您的Vue CLI项目中使用。 安装 如果您有任何问题,请访问或我们的。 一般先决条件: NodeJS / npm Vue CLI( yarn ... -
Electron + Vue跨平台应用(七)基础技法(一)
2018-12-23 18:11:27Electron + Vue + Vscode构建跨平台应用(一)知识点补充 Electron + Vue + Vscode构建跨平台应用(二)Electron + Vue环境搭建 Electron + Vue + Vscode构建跨平台应用(三)利用webpack搭建vue项目 Electron + ... -
用electron-vue实现跨平台桌面应用程序完整教学
2021-03-28 10:07:51使用JavaScript,HTML和CSS构建跨平台桌面应用程序 第一小节:创建一个vue项目,第二节在vue基础上搭建electron(环境搭建,您需要配置以下环境) 安装node.js环境,下载node.js SDK 链接地址:... -
适合前端Vue开发童鞋的跨平台Weex
2019-10-15 22:21:30基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 ...但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗?Weex 的开发效率、Weex 的质量是否满足需求? 一、开发环境 在这个 Weex app 开发中,我的开... -
Vue+Electron开发跨平台桌面应用
2020-08-01 18:00:00来源:xiangzhihonghttps://segmentfault.com/a/1190000021376934虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览... -
electron-vue跨平台桌面应用开发实战教程(四)——窗口样式&打开新窗口
2020-02-21 11:52:10本文我们讲解下怎么修改窗口样式,系统默认的窗口非常普通,通常...electron-vue跨平台桌面应用开发实战教程(一)——Hello World electron-vue跨平台桌面应用开发实战教程(二)——主进程常用配置 electron-vue跨... -
创建美观,高性能的跨平台移动应用程序。 基于Web组件,并提供Angular 1、2,React和Vue.js的绑定。-Vue....
2021-05-27 21:05:13Onsen UI-跨平台混合应用程序和PWA框架Onsen UI是一个开放源代码框架,可以轻松创建具有原生感觉的渐进式We Onsen UI-跨平台混合应用程序和PWA框架,Onsen UI是一个开放源代码框架易于创建具有本机感觉的渐进式Web... -
electron-vue跨平台桌面应用开发实战教程(七)——ffi调用C++(Windows平台)
2020-02-25 11:32:20electron功能很强大,但是有一些跟操作系统底层交互的功能,electron无法实现,这个时候我们就可以调用原生dll来配合完成对应功能,本文主要讲解在windows平台下,调用C#的dll文件 使用electron-edge-js调用dll(c#... -
跨平台开发框架到底哪家强?5款主流框架横向对比!
2022-01-07 01:06:37跨平台开发框架到底哪家强?目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特性。国内外笔者选择了一共5个主流的测评... -
跨平台开发框架和工具集锦
2018-09-20 05:17:12经常看到大家在一些技术群热火朝天的争论跨平台技术的牛逼之处,其实是毫无意义的,尺有所短寸有所长,每个技术各司其职,没有好坏之分。争论有何意义?我们倒不如来研究一下,这个跨平台技术适不适用以及性能和稳定... -
几个跨平台移动App开发方案框架比较
2020-10-29 19:28:09根据一些老博客里面的内容,现在整理一下目前流行的跨平台移动App开发技术的特点,并将几个不同的开发平台框架进行比较说明,仅供大家参考。 每个开发框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScrip -
2021最新15个App跨平台开发框架
2020-11-26 16:35:54作为用户来说,当然希望使用App的时候能够顺畅流利,不可否认的是,使用iOS和Android开发出来的应用非常流畅而且高效,但是缺点就是需要耗费较长的时间来开发,比如...所以人们希望选择使用跨平台应用来解决这一问题。 -
零基础学Vue+Elementui(1)开发工具及环境搭建
2020-12-04 15:35:18(转载自零基础学Vue+Elementui(1)开发工具及环境搭建 【Vue+Elementui实战项目简介】 随着互联网行业的蓬勃发展,网站以及网页的开发从mvc老式的服务端渲染也逐渐发展为先在的前后端分离的模式,这在互联网发展的... -
手把手教你使用Electron13+vue-cli3+element-ui开发跨平台桌面应用(二)
2021-12-09 15:05:29如果还没有安装vue-cli3,先执行以下命令安装: cnpm install @vue/cli -g 如果你已安装vue-cli3,但不是最新版本,可执行以下命令升级: npm update @vue/cli -g 1.4 创建vue项目 找个喜欢的目录,执行以下... -
跨平台开发解决方案浅谈
2021-10-31 15:27:45跨平台开发解决方案浅谈 前言 本文所讨论技术都是基于大前端生态下的 本文所指跨平台概念无特殊说明时泛指跨安卓和ios 用前端工程化技术开发出app也是本文所讲重点 作为用户来说,当然希望使用App的时候能够顺畅... -
基于vue.js的跨平台app开发 功能实现 毕业设计 指导(带完整后台和接口)
2020-03-12 09:42:58【模块概要】 首页、分类、商品详情页面,包含加入购物车、收藏商品、商品评论功能、用户登录、微信登录、订单管理、地址管理;完整的购物流程,商品的加入、编辑、删除、批量选择,收货地址的...前端使用:vue.j... -
从事编程那些年经历的跨平台开发工具框架演变历史
2020-01-19 07:19:05前言:不知道是幸运还是不幸,从职业生涯早期开始就常常在做各种跨平台开发,从早期的Cordova到现在的ReactNative,从SmartTV到Android、iOS、MacOS以及Windows(还有死去的Windows Phone,我可爱的Lumia 720只能... -
移动端跨平台开发方案解析
2021-01-04 15:31:58原生开发 Native App是一种基于智能手机本地操作系统如iOS、...Native App因为位于平台层上方,向下访问和兼容的能力会比较好一些,可以支持在线或离线,消息推送或本地资源访问,摄像拨号功能的调取。 优势 1、相比 -
electron+vue开发跨平台桌面应用
2020-08-11 11:59:50因为工作需要,研究electron和vue项目的结合使用,这里来将整理资料分享下 官网地址:入口 前提条件: 安装并应用了vue的脚手架,搭建了一个项目 ,教程入口 使用方法:(网速不好的小伙伴请直接看1.2) 一...