首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用基于Vue.js和Hbuilder混合模式移动开发打造属于自己移动app

近几年,混合模式移动应用概念甚嚣尘上,受到了一些中小型企业青睐,究其原因,混合模式开发可以比传统移动开发节约大量开发成本和人力成本。     ...本文介绍如果使用vue.js编写基于h5适配多端前端代码,打包后,利用hbuilder打包成安卓客户端安装包apk,从而达到一套代码适配多个平台功能。    ...我们需要利用bootstrap框架来帮我们适配大小屏幕,这里引入bootstrap外部css,修改入口文件main.js,加入下面代码 require('!style-loader!...,也就是快手和抖音常用那种首屏流动式布局,所以需要安装vue-masonry,这个vue.js组件可以很方便将布局改造成瀑布式。...history模式,最后打包项目 cnpm run build vue.js将会包项目直接打包在dist文件夹中,这时,下载hbuilder安装包 http://www.dcloud.io/hbuilderx.html

1K40

分享一篇关于如何使用BootstrapVue入门指南

这个开源工具包是基于Vue.jsBootstrap构建,非常适合开发现代Web应用程序。本文将介绍其基础知识,让您可以开始使用这个强大框架。...BootstrapVue是一个流行开源前端框架,它结合了Bootstrap(一个前端UI框架)和vue.js(一个渐进式JavaScript框架),用于创建可重用UI组件和Web应用程序。...简易迁移:BootstrapVue使开发人员能够轻松从原生JavaScript切换到Vue.js,而无需担心Bootstrap对JQuery重度依赖。.../vue@2.6.14/dist/vue.min.js"> <script src="https://unpkg.com/<em>bootstrap</em>-<em>vue</em>@2.21.2/dist/<em>bootstrap</em>-<em>vue</em>.min.<em>js</em>...BootstrapVue组件是专门为<em>Vue</em>.<em>js</em>构建<em>的</em>,使它们更容易使用和集成到你<em>的</em><em>Vue</em>.<em>js</em>应用程序中。

74430
您找到你想要的搜索结果了吗?
是的
没有找到

Vue项目一键打包为桌面客户端 十分钟让你解决烦恼

并将 package.json 文件内容编辑为: { "main": "index.html", "name": "我 CSDN 博客" } 其中 main 字段为接下来新建 html 文件名称...*/ "page-cache": false } } 二、发布 Vue 项目 聪明同学已经发现,本篇博客标题为 《经常忘记网址?将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼》。...但我们手上不是网址,是一个 localhost(本地版) Vue 项目! 第二章就主要讲解,如何将这个 Vue 项目转换为网址!...2.2.2 安装依赖、编译项目 若你电脑没有配置 node.jsVue 脚手架,或者不知道如何安装 VsCode,可以移步 Vue 环境配置讲解。...三、总结 本文讲解了如何将一个 Vue 项目打包为桌面客户端,实现像 Excel 一样双击运行,适用于管理较多项目且经常忘记网址场景。

73740

Vue.js 通过举一反三建立企业级组件库

如何灵活控制复杂样式 建立企业级内部组件库详细步骤 Bootstrap alert bootstrapVue alert view-design 中 alert 安装 npm 安装 verdaccio...如何安装插件 如何从开源插件源码获得经验 解耦关键点是什么 如何灵活控制复杂样式 建立企业级内部组件库详细步骤 如何安装插件 在 Vue 插件使用过程中,首先需要搞清楚几个概念,如下: ?...(图片来自:https://bootstrap-vue.org) 对于 bootstrapVue 来说,它和 Bootstrap 区别还是比较大。...alert.js 中,这不仅和 iview 有所区别,它和 Bootstrap 也有区别,如下: ?...明确观察者模式、策略模式、工厂模式、状态模式,等着这些常用模式对于常用业务处理过程。遵守设计原则,比如在前面提到几个插件中,都能够看出来它们对于不同功能模块分割,各自业务之间几乎没有任何交叉。

2.4K30

Bootstrap 模态框(Modal)插件基本应用

如果只是单独引用该插件功能,只需要引用 modal.js ,也可以引用 bootstrap.js 或压缩版 bootstrap.min.js。...) 实例: 注意:因为 Bootstrap.js 需要依赖 jquery 所以需要引入 jquery.js 文件 测试代码如下:     创建模态框...在这里它被用于关闭模态窗口。 class="modal-body",是 Bootstrap CSS 一个 CSS class,用于为模态窗口主体设置样式。...class="modal-footer",是 Bootstrap CSS 一个 CSS class,用于为模态窗口底部设置样式。...二、选项 有一些选项可以用来定制模态窗口(Modal Window)外观和感观,可以将选项通过 data 属性或 JavaScript 来传递,对于 data 属性,需要将参数名称放到 data- 之后

4.4K00

深入浅出微前端

比如我们公司权限管理后台,首页中罗列了各个系统入口,每个系统由单独仓库管理,点击具体系统,打开新窗口进行访问。 由于多个应用一级域名一致,使用不同二级域名区分。...cookie存放在一级域名下,所以各应用可以借此实现用户信息一致性。但是对于头部、左侧菜单通用模块,以及多个应用之间如何实现资源共享?...自组织模式:通过约定进行互相调用,但会遇到处理第三方依赖问题。 去中心模式:脱离基座模式,每个应用之间都可以批次分享资源。...应用单独开发: ESM只是js一种规范,不会影响应用开发模式。 多应用整合: 只要将微应用以ESM方式暴露出来,就能正常加载。...appName: 应用名称 loadApp: 应用加载函数 此函数会返回 bootstrap mount unmount activeWhen: 当前什么时候激活 location => location.hash

3.1K10

金九银十求职季,前端面试大全送给你

标准模式排版 和JS运作模式都是以该浏览器支持最高标准运行。在兼容模式中,页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 2、行内元素有哪些?块级元素有哪些?...特性: - 函数内再嵌套函数 - 内部函数可以引用外层参数和变量 - 参数和变量不会被垃圾回收机制回收 26、什么是js严格模式 严格模式就是在js代码前加 use strict 让 Javascript...- WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 组件样式, - js 逻辑处理,网络请求 - json 小程序设置,如页面注册,页面标题及tabBar。...包括页面注册,网络设置,以及小程序window背景色,配置导航条样式,配置默认标题。 - app.js必须要有这个文件,没有也是会报错!...但data-名称不能有大写字母和不可以存放对象 48、程序wxss和css有哪些不一样地方?

1.4K20

vue 2.6 中 slot 新用法

,但这次我们添加了一个名为header槽,可以在其中输入标题,用法如下: // app.vue <template v-slot:header...可重用模式 组件总是被设计为可重用,但是某些模式对于使用单个“普通”组件来实施是不切实际,因为为了自定义它,需要props 数量可能过多或者需要通过props传递大部分内容或其它组件。...插槽可用包裹外部HTML标签或者组件,并允许其他HTML或组件放在具名插槽对应名称插槽上。 对于第一个例子,从简单东西开始:一个按钮。假设咱们团队正在使用 Bootstrap。...通常,在Bootstrap模式情况下,可以将data-dismiss =“modal”添加到按钮来进行关闭。 但我们希望隐藏Bootstrap 特定东西。...当你不使用模板时,可以跳过使用.vue文件扩展名,方法是将JavaScript从script标记中提取出来,然后将其放入.js文件中。在编译这些Vue文件时,这应该会给你带来非常小性能提升。

1.6K20

JavaScript设计模式之单例模式

JavaScript 设计模式 之旅 设计模式开篇 日常开发中,我们都很注重开发技巧,好开发 技巧可以事半功倍解决此刻问题。 那么这些技巧如何来得呢?...我理解:经过不断踩坑,解BUG,总结出来一些处理对应问题解决方案,这就所谓 技巧。 说起设计模式,其实我们日常开始中也经常用到,只是你不知道用解决方案方案对应设计模式名称....因为它满足单例模式两点: 创建全局变量是独一无二 它可以全局访问这个变量实例 // login.js var loginInfo = { username: '', token: '...定义全局变量多了, 会覆盖掉之前定义全局变量,这样会造成不必要BUG. 如何处理命名空间污染呢? 如何处理呢?...这时,可以通过惰性单例模式来解决此问题,例如单击了登陆按钮,才会创建登陆弹窗DOM,并且记录此次点击状态,如果下次还要打开,只是更改 DOM style display 属性即可。

31350

客户端开发(Electron)认识窗口

背景说明: 窗口就是我们在电脑端经常使用软件时候显示Logo,标题和操作最小化,最大化,关闭按钮标题栏及标题栏下面显示内容整个窗口,这往往在Web前端中接触不是那么多,但要开发一款体验不错...是否启用单独上下文环境运行 自定义窗口标题栏: 下图是我们初始时候标题栏和菜单栏两部分(记得当时刚学计算机课就是认识每一部分名称): 我要自定义窗口标题栏第一步那就是要隐藏掉默认标题栏...,在窗口对象上新增frame属性且设置值为false,如下图: 在VueApp.vue中通过html标签来绘制我们标题栏,绘制后结果如下图所示: 为标题按钮增加事件: 按钮事件和调用函数定义均与...Vue一致,我们需要考虑如何与Electron联通来调用对应API: 调整窗口对象中的如下所示属性,切记启用remote: 在App.vue中导入electron对象: const { remote...} = window.require('electron') 对应操作API调用: 当窗口最大化后如何缩小: 监听窗口变化来动态切换isMaxSize值来动态渲染最大化后按钮,主要通过窗口对象来监听

5.1K60

使用 Flask 和 Vue.js 来构建全栈单页应用

在这个教程中,我将向你展示如何Vue 单页面应用和 Flask 后端连接起来。 简单来说,如果想在 Flask 中使用 Vue 框架是没有什么问题。...做一个用 Vue.js 做前端 (用单页组件,HTML5 历史模式vue-router」,以及其他好特性),用 Flask 做后端单页应用怎么样?...现在,我们需要更改 frontend/src/router/index.js 文件来呈现我们新组件: import Vue from 'vue' import Router from 'vue-router...否则只需使用代理前端开发服务器技巧。 另一项改进是避免在前端硬编码 API 路由。也许您需要创建一个包含 API 路由名称词汇集。 因此,当您更改 API 路由时,您只需刷新这个词汇集即可。...前端关于路由名称代码不需要更改。 通常在开发过程中,您将至少需要两个终端窗口:一个用于 Flask ,另一个用于 Vue.js

3K10

BootstrapVue使用入门

入门 开始使用BootstrapVue,它基于世界上最流行框架 – Bootstrap v4,用于使用Vue.js构建响应迅速,移动优先站点。...有关可用插件名称(以及每个插件中包含组件和指令)以及组件和/或指令导入名称详细信息,请参阅每个组件和 指令文档底部参考部分。 请注意,导入单个组件时,任何组件别名都将不可用。...注意:最佳树抖动仅在Nuxt.js应用程序处于production 模式时有效。不处于production模式(即 dev模式)时,您可能会注意到较大束大小。...但是,如果你目标只是现代浏览器,你可能要导入BootstrapVuesrc/index.js,和白名单bootstrap-vue/src通过自己项目transpilation。...有关Bootstrap v4当前支持浏览器更多信息,请参阅 浏览器和设备。 JS BootstrapVue是用Vue.js编写!因此,您项目和捆绑包取决于支持哪些浏览器。

10K30

分享 10 个有用 Vue.js 自定义 Hook

我可以说 Vue.js 是我进入 JavaScript 世界第一扇门之一。 目前,Vue.js 仍然是一个很棒框架。 我认为有了组合 API,Vue.js 只会增长得更多。...在本文中,我将向分享 10 个可以使用 Vue.js 制作有用自定义钩hook。 01、使用窗口调整大小 这是一个基本hook。...,我们只需要创建一个自定义挂钩,它将返回一个通过主题名称更改主题函数。...我们经常用它处理流行操作之一是用户在模式之外单击。 useOnClickOutside 对于这种情况是一个有用hook。 我们只需要一个 ref 元素、回调函数并将其绑定到窗口事件中。...我认为它们构建和使用都很简单。 我只是为那些想要在 Vue.js 中使用这些钩子的人提供一些注释。 请记住删除要添加到窗口事件。

31530
领券