精华内容
下载资源
问答
  • 本文将带领大家使用vue-cli + electron-builder构建一个Hello WorldElectron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。在开始搭建项目...

    本文将带领大家使用vue-cli + electron-builder构建一个Hello World

    Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。

    9fac9de7998459977b6bdf0139d7accb.png

    在开始搭建项目之前,需要安装以下工具

    node.js

    1 创建项目

    1.1 安装vue-cli

    先查看是否已经安装了vue-cli,vue-cli的版本是什么

    vue -V

    如果版本叫老,可以直接卸载,再安装最新版本

    卸载

    npm uninstall vue-cli -g

    安装

    install @vue/cli -g

    1.2 使用vue-cli创建项目

    选取一个项目存放的路径,然后开始创建项目例如:

    vue create electron-vue-helloworld

    这里将项目名定为:electron-vue-helloworld输入完上述命令之后进入vue项目的创建过程。出现以下内容

    Vue CLI v3.8.4? Please pick a preset: (Use arrow keys)  default (babel, eslint) > Manually select features 

    第一个选项是 “default” 默认,只包含babel和eslint第二个选项是 “Manually select features”自定义安装

    选择自定义安装,进入下一步选择

    ? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing

    这里我们选择

    1. babel(高级的语法转换为 低级的语法)
    2. Router(路由)
    3. Vuex(状态管理器)
    4. CSS Pre-processors(css预处理器)
    5. Linter / Formatter(代码风格、格式校验)

    然后进入下一步

    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  n

    这一步是设置router是否使用history模式,这里我们选n,接着进入下一步

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  Sass/SCSS (with dart-sass)   Sass/SCSS (with node-sass)   Less ❯ Stylus 

    这里是设置css预处理模块,在这里我要强调一下,不需要乱选,选择我们熟悉的一种,在这里我们选择 Stylus ,然后进入下一步

    ? Pick a linter / formatter config: (Use arrow keys)  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

    这一步是选择什么时候执行ESLint检查,这里我们选择保存时检查“Lint on save”,然后进入下一步

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?   In dedicated config files ❯ In package.json 

    这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中,这里我们选择“In package.json”,然后进入下一步

    ? Save this as a preset for future projects? (y/N) N

    这一步是询问时候以后创建项目是否也采用同样的配置,这里我们选N。到目前为止,vue项目是创建完成了,我们等待项目下载依赖包,等项目构建完毕我们开始集成electron

    1.3 使用electron-builder集成electron

    进入项目根目录(electron-vue-helloworld),然后执行下列命令:

    vue add electron-builder

    这个时候会安装electron-builder的依赖,可能比较耗费时间,请大家耐心等待,安装完成后会出现以下选型:

    ? Choose Electron Version (Use arrow keys)  ^4.0.0   ^5.0.0 ❯ ^6.0.0

    这一步是选择Electron的版本,我们这里选择最新版本6.0.0,等待安装完成即可。安装完成后会在src目录下生成background.js,并在package.json 文件中修main为"main": "background.js"

    至此,所有的安装都已经完成了,接下来我们就可以运行程序看效果了。

    1.4 运行程序

    执行以下命令,运行程序

    npm run electron:serve

    在启动的时候,会启动很久,并出现以下信息

    INFO  Launching Electron...Failed to fetch extension, trying 4 more timesFailed to fetch extension, trying 3 more timesFailed to fetch extension, trying 2 more timesFailed to fetch extension, trying 1 more times

    这是在安装vuejs devtools,由于网络问题,一直安装不上。重试5次之后就会自动跳过并且启动程序。

    编译成功后,会自动弹出一个桌面程序,如下图所示

    9d6f1cbf7eb9e41b051c34ca05209685.png

    下一期我们将详细的讲一下background.js,里边的一些参数都是干什么用的。

    展开全文
  • 本文将带领大家使用vue-cli + electron-builder构建一个Hello WorldElectron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。在开始搭建项目...

    8d6558c9f8b119f79e98ebec35ebe7da.png
    本文将带领大家使用vue-cli + electron-builder构建一个Hello World

    Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。

    在开始搭建项目之前,需要安装以下工具

    1. node.js

    1 创建项目

    1.1 安装vue-cli

    先查看是否已经安装了vue-cli,vue-cli的版本是什么

    vue -V

    如果版本叫老,可以直接卸载,再安装最新版本

    卸载

    npm uninstall vue-cli -g

    安装

    install @vue/cli -g

    1.2 使用vue-cli创建项目

    选取一个项目存放的路径,然后开始创建项目 例如:

    vue create electron-vue-helloworld

    这里将项目名定为:electron-vue-helloworld
    输入完上述命令之后进入vue项目的创建过程。出现以下内容

    Vue CLI v3.8.4
    ? Please pick a preset: (Use arrow keys)
      default (babel, eslint) 
    > Manually select features

    第一个选项是 “default” 默认,只包含babel和eslint
    第二个选项是 “Manually select features”自定义安装

    选择自定义安装,进入下一步选择

    ? Check the features needed for your project: (Press <space> to select, <a> to t
    oggle all, <i> to invert selection)
    ❯◉ Babel
     ◯ TypeScript
     ◯ Progressive Web App (PWA) Support
     ◉ Router
     ◉ Vuex
     ◉ CSS Pre-processors
     ◉ Linter / Formatter
     ◯ Unit Testing
     ◯ E2E Testing

    这里我们选择 1. babel(高级的语法转换为 低级的语法)
    2. Router(路由)
    3. Vuex(状态管理器)
    4. CSS Pre-processors(css预处理器)
    5. Linter / Formatter(代码风格、格式校验)

    然后进入下一步

    ? Use history mode for router? (Requires proper server setup for index fallback 
    in production) (Y/n)  n

    这一步是设置router是否使用history模式,这里我们选n,接着进入下一步

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): (Use arrow keys)
      Sass/SCSS (with dart-sass) 
      Sass/SCSS (with node-sass) 
      Less 
    ❯ Stylus

    这里是设置css预处理模块,在这里我要强调一下,不需要乱选,选择我们熟悉的一种,在这里我们选择 Stylus ,然后进入下一步

    ? Pick a linter / formatter config: (Use arrow keys)
      ESLint with error prevention only 
      ESLint + Airbnb config 
    ❯ ESLint + Standard config 
      ESLint + Prettier

    这一步是选择ESLint代码检查工具的配置,这里我们选择标准配置“ESLint + Standard config”,然后进入下一步

    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
    > to invert selection)
    ❯◉ Lint on save
     ◯ Lint and fix on commit

    这一步是选择什么时候执行ESLint检查,这里我们选择保存时检查“Lint on save”,然后进入下一步

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
      In dedicated config files 
    ❯ In package.json

    这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中,这里我们选择“In package.json”,然后进入下一步

    ? Save this as a preset for future projects? (y/N) N

    这一步是询问时候以后创建项目是否也采用同样的配置,这里我们选N。到目前为止,vue项目是创建完成了,我们等待项目下载依赖包,等项目构建完毕我们开始集成electron

    1.3 使用electron-builder集成electron

    进入项目根目录(electron-vue-helloworld),然后执行下列命令:

    vue add electron-builder

    这个时候会安装electron-builder的依赖,可能比较耗费时间,请大家耐心等待,安装完成后会出现以下选型:

    ? Choose Electron Version (Use arrow keys)
      ^4.0.0 
      ^5.0.0 
    ❯ ^6.0.0

    这一步是选择Electron的版本,我们这里选择最新版本6.0.0,等待安装完成即可。安装完成后会在src目录下生成background.js,并在package.json 文件中修main为"main": "background.js"

    至此,所有的安装都已经完成了,接下来我们就可以运行程序看效果了。

    1.4 运行程序

    执行以下命令,运行程序

    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

    这是在安装vuejs devtools,由于网络问题,一直安装不上。重试5次之后就会自动跳过并且启动程序。

    编译成功后,会自动弹出一个桌面程序,如下图所示

    5c8fb51c546a10c73bb62cd25e9df6b3.png

    下一期我们将详细的讲一下background.js,里边的一些参数都是干什么用的。

    展开全文
  • Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。 在开始搭建项目之前,需要安装以下工具 node.js 1 创建项目 1.1 安装vue-cli ...

    本文将带领大家使用vue-cli + electron-builder构建一个Hello World

    Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。

    在开始搭建项目之前,需要安装以下工具

    1. node.js

    1 创建项目

    1.1 安装vue-cli

    先查看是否已经安装了vue-cli,vue-cli的版本是什么

    vue -V
    

    如果版本叫老,可以直接卸载,再安装最新版本

    卸载

    npm uninstall vue-cli -g
    

    安装

    install @vue/cli -g
    

    1.2 使用vue-cli创建项目

    选取一个项目存放的路径,然后开始创建项目
    例如:

    vue create electron-vue-helloworld
    

    这里将项目名定为:electron-vue-helloworld
    输入完上述命令之后进入vue项目的创建过程。出现以下内容

    Vue CLI v3.8.4
    ? Please pick a preset: (Use arrow keys)
      default (babel, eslint) 
    > Manually select features 
    

    第一个选项是 “default” 默认,只包含babel和eslint
    第二个选项是 “Manually select features”自定义安装

    选择自定义安装,进入下一步选择

    ? Check the features needed for your project: (Press <space> to select, <a> to t
    oggle all, <i> to invert selection)
    ❯◉ Babel
     ◯ TypeScript
     ◯ Progressive Web App (PWA) Support
     ◉ Router
     ◉ Vuex
     ◉ CSS Pre-processors
     ◉ Linter / Formatter
     ◯ Unit Testing
     ◯ E2E Testing
    

    这里我们选择

    1. babel(高级的语法转换为 低级的语法)
    2. Router(路由)
    3. Vuex(状态管理器)
    4. CSS Pre-processors(css预处理器)
    5. Linter / Formatter(代码风格、格式校验)

    然后进入下一步

    ? Use history mode for router? (Requires proper server setup for index fallback 
    in production) (Y/n)  n
    

    这一步是设置router是否使用history模式,这里我们选n,接着进入下一步

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): (Use arrow keys)
      Sass/SCSS (with dart-sass) 
      Sass/SCSS (with node-sass) 
      Less 
    ❯ Stylus 
    

    这里是设置css预处理模块,在这里我要强调一下,不需要乱选,选择我们熟悉的一种,在这里我们选择 Stylus ,然后进入下一步

    ? Pick a linter / formatter config: (Use arrow keys)
      ESLint with error prevention only 
      ESLint + Airbnb config 
    ❯ ESLint + Standard config 
      ESLint + Prettier 
    

    这一步是选择ESLint代码检查工具的配置,这里我们选择标准配置“ESLint + Standard config”,然后进入下一步

    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
    > to invert selection)
    ❯◉ Lint on save
     ◯ Lint and fix on commit
    

    这一步是选择什么时候执行ESLint检查,这里我们选择保存时检查“Lint on save”,然后进入下一步

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
      In dedicated config files 
    ❯ In package.json 
    

    这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中,这里我们选择“In package.json”,然后进入下一步

    ? Save this as a preset for future projects? (y/N) N
    

    这一步是询问时候以后创建项目是否也采用同样的配置,这里我们选N。到目前为止,vue项目是创建完成了,我们等待项目下载依赖包,等项目构建完毕我们开始集成electron

    1.3 使用electron-builder集成electron

    进入项目根目录(electron-vue-helloworld),然后执行下列命令:

    vue add electron-builder
    

    这个时候会安装electron-builder的依赖,可能比较耗费时间,请大家耐心等待,安装完成后会出现以下选型:

    ? Choose Electron Version (Use arrow keys)
      ^4.0.0 
      ^5.0.0 
    ❯ ^6.0.0
    

    这一步是选择Electron的版本,我们这里选择最新版本6.0.0,等待安装完成即可。安装完成后会在src目录下生成background.js,并在package.json 文件中修main为"main": “background.js”

    至此,所有的安装都已经完成了,接下来我们就可以运行程序看效果了。

    1.4 运行程序

    执行以下命令,运行程序

    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
    

    这是在安装vuejs devtools,由于网络问题,一直安装不上。重试5次之后就会自动跳过并且启动程序。

    编译成功后,会自动弹出一个桌面程序,如下图所示

    image

    下一期我们将详细的讲一下background.js,里边的一些参数都是干什么用的。

    更多内容请关注公众号
    在这里插入图片描述

    展开全文
  • 写在前面Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。今日主题APP最常用界面之一:登录平台支持小程序:mpvue、cmljs(卡梅龙)APP:uniapp、apicloud以及任何基于h5的...
    ac408036d6580fc58c6e6dc5ad34263f.png

    写在前面

    Vue跨平台APP开发案例:完成常用界面的开发,学习积累vue栈知识,重点是提供拿来主义代码。

    今日主题

    APP最常用界面之一:登录

    平台支持

    • 小程序:mpvue、cmljs(卡梅龙)
    • APP:uniapp、apicloud以及任何基于h5的混合应用框架
    • weex

    效果展示

    08247ce98fe58e1f6ccdc0637b32bb5b.png

    登录界面

    实现分析

    • 界面分析
    1. 整体水平居中
    2. 图标较少,大部分样式代码可实现
    3. psd标注切片上传蓝湖
    • 代码实现
    1. 开发工具:HBuilderX
    2. 代码
    5d52916b28215124d466b6e59a7517ee.png

    界面解析

    • 圆角头像

    结构:外圆(内部透明)+内圆+头像

    界面代码:

    72efc10e7466c630e4d565376e2f66d9.png

    界面样式:

    146d4f7e0612f926a6c7405acc3da395.png
    • 登录表单

    界面代码:

    ccd0bd255f034f2d62acd90817bc76a7.png

    界面样式:

    78537c0a77a1e31c5726f14a4456fc09.png
    • 第三方登录

    界面代码

    d6824f64be482ab64680609ac3cc8f59.png

    界面样式

    841ca3c0ca882f8078bad53979924f5e.png

    使用的技术及注意点

    • css扩展:sass
    • input的双向绑定:两种方式(v-model、bind:value + input事件 )

    总结

    为了平台的兼容性,全部采用flex布局。登录界面相对简单,你也可以练习下,看看会遇到什么问题。

    ****最后****

    这个案例是一个长期的积累,希望你能够+关注,点赞!!你的支持就是我的动力!!

    展开全文
  • 前边几篇文章介绍了一些基本用法,最终都是要打包成可执行应用程序的,今天我们就讲讲...这个文件是用来配置打包工具electron-builder的参数,代码中有对应的注释,按照对应的配置修改为自己的图标就好。 module.e...
  • 本文将带领大家使用vue-cli + electron-builder构建一个Hello WorldElectron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。在开始搭建项目...
  • 身为IT程序猿,深知在开发过程中,后端、前端、测试、运维同学经常面临联调以及各个环境的测试,这时就需要不断... 偶然的机会了解到electron这个框架可以使用JavaScript, HTML 和 CSS 构建跨平台的桌面应用,对于js...
  • 但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗?Weex 的开发效率、Weex 的质量是否满足需求? 一、开发环境 在这个 Weex app 开发中,我的开发环境相关配置如下: 工具名称 版本号 Node.js 8.2.1...
  • 总篇43篇 2019年第17篇背景公司去年对CDN资源服务器进行了迁移,由原来的通过FTP方式的文件存储改为了使用S3协议上传的对象存储,部门内 @柴俊堃 同学开发了一个命令行脚本工具RapidTrans(睿传),使用睿传可以很方便...
  • > 前边几篇文章介绍了一些基本用法,最终都是要打包成可执行... 增加vue.config.js这个文件是用来配置打包工具electron-builder的参数,代码中有对应的注释,按照对应的配置修改为自己的图标就好。module.expo...
  • 总篇43篇 2019年第17篇背景公司去年对CDN资源服务器进行了迁移,由原来的通过FTP方式的文件存储改为了使用S3协议上传的对象存储,部门内 @柴俊堃 同学开发了一个命令行脚本工具RapidTrans(睿传),使用睿传可以很方便...
  • 目录 1.创建项目 1.1 安装Nodejs 1.2 使用cnpm加速下载 ... 2.1 配置ESLint代码格式检查工具 2.2 配置vue 3.项目基本设定 3.1 主进程和渲染进程简介 3.2 APP窗口大小 3.3 取消跨域限制
  • vue开发与调试工具–vscode vscode简介 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色...
  • VScode + Electron + vue构建跨平台应用 引用文本 知识点补充 VScode :一个前端开发工具; Electron:使用HTML,CSS和JavaScript来构建跨平台桌面应用程序; Vue :一套构建用户界面的渐进式javascript框架; ...
  • 从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。 DevExtreme...
  • “Apache Cordova是一个开源移动开发框架,它允许您使用标准的Web技术,如HTML5,CSS3和JavaScript进行跨平台开发,避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行,并依靠符合标准的API绑定来...
  • Flutter/Weex/React/Angular/Vue 等诸多框架的开发者,发掘到 Xamarin 框架才是最值得推荐的,使用 Xamarin 必定让你觉得相识恨晚,不是那一丝丝那种,作为一个被 M$ 高价收购的第三方框架,无论从文档还是现有的...
  • uni-app跨平台APP开发

    千次阅读 2019-01-02 15:29:46
    uni-app跨平台APP开发uni-app 介绍开发开发工具HBuilderX模拟器连接框架介绍目录结构生命周期路由页面样式与布局配置pages.jsonmanifest.json组件、接口 uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的...
  • 开发工具中打开篇一中创建的名为vue-electron-demo的项目: 删除 HelloWorld.vue (一般用不上,后续需要的时候自己创建,删除后会报错,故需修改代码) assets下的logo.png也可删除: views下的Home组件 修...
  •   今天给大家推荐一款框架叫泰罗·奥特曼(Taro), Taro是一款开放式框架,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。   现如今市面上端的形态多种多样...
  • 强大的跨平台Webpack CLI工具 安装 @ easy-team / easywebpack-cli-> @ easy-team / easywebpack(通天塔7) easywebpack-cli-> easywebpack(Babel 6) $ npm i @easy-team/easywebpack-cli -g 产品特点 :heavy_...
  • 工具 一:基础 html css javascript c# nodejs sql json jsonp xml orm 设计模式 数据结构 二:后端 1.MongoDb 2.elasticsearch 3.MQ 4.Redis 5.RestFul 二:前端 1.Jquery.js 2.Angular.js ...
  • 1.2.1 HbuilderX开发工具 15 1.2.2 通过 HBuilderX 可视化界面 16 1.2.3 通过 HBuilderX发布为小程序 26 1.2.4 通过vue-cli命令行 28 1.3 开发规范 30 1.3.1 Vue 单文件组件 (SFC) 规范 31 1.4 目录结构 33 1.5 资源...
  • 1.安装 vue-cli 脚手架 npm install --g vue-cli 2.创建项目 ...vue init mpvue/mpvue-...项目就跑起来了,这个时候,我们打开微信开发者工具,选择小程序,然后新建一个,项目目录填 我们项目目录下的dist目录t...
  • vue+cordova混合开发app

    2020-04-01 17:30:59
    Cordova/Phonegap是一种跨平台应用开发工具,能将html文件打包成android和ios,下面介绍下vue项目中调用cordova插件方法 在VUE项目中index.html文件引入cordova.js 在main.js中,注册vue之前加上cordova监听事件...
  • 1.2.1 HbuilderX开发工具 可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。 开始之前,开发者需先下载安装如下工具: HBuilderX:官方IDE下载地址 https://www.dcloud.io/hbuilderx.html ...
  • Electron 是一个非常强大的工具,它可以用来构建跨平台的桌面应用,编写一次到处运行。知乎视频​www.zhihu.com0. 准备工作安装好nodejs在终端中输入 node -v 看到版本号即为成功node -v # 输出 v14.11.0安装一个IDE...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 174
精华内容 69
关键字:

vue跨平台开发工具

vue 订阅