Vue + quasar-framework进行Vue混合app开发 ─ 环境准备(一)

最新推荐文章于 2024-04-23 17:20:53 发布
最新推荐文章于 2024-04-23 17:20:53 发布
阅读量1.4w 收藏 22
点赞数 7
分类专栏： vue混合app开发 文章标签： quasar vue混合app cordova
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liub37/article/details/83344994
版权

这几天有空闲时间去网上找了找vue的相关的ui框架，看到有网友推荐quasar-framework，去它官网看了下，然后看到了Hybrid Mobile Apps (that look native,意思就是混合移动应用程序，这不就是混合app吗，还是基于Vue的，仔细看了下支持的东西还挺多单页面应用、SSR服务器渲染、渐进式Web、混合app开发、Electron Apps开发（桌面应用），乖乖 有点强大啊。其他的我们这里就不讨论了，主要是讲下它的混合app开发，官网的文档都是英文的，不过找到了一个中文文档，可以两边参考着看，因为用的cordova，可以直接安装cordova的相关插件，直接使用，直接调用原生的Api，下面进入正题。
Vue + quasar-framework进行Vue混合app开发

quasar安装

官网是推荐yarn形式安装，所以为了保证不出问题，这里我们也用yarn安装

yarn安装

如果已经安装了可以忽略次步骤，下载安装包，无脑下一步下一步安装完就行了
Vue + quasar-framework进行Vue混合app开发
安装完毕后打开cmd，输入yarn -v，出现版本号说明就安装好了

quasar-cli 安装

# Node.js >= 8.9.0 是必需的.
yarn global add quasar-cli

项目初始化

注：路径请不要带有中文，防止后面出现乱七八糟的问题

quasar init <项目名称>

如：quasar init first-quasar-app，first-quasar-app是项目的名称
Vue + quasar-framework进行Vue混合app开发
这个不知道什么意思，直接回车了

最低0.47元/天 解锁文章
寻梦无痕
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
二、 quasar 项目创建及运行
Fx的博客
11-15 9422
quasar 项目创建 控制台输入 quasar create your_project_name (第一次输入该命令会下载 quasar 模板,耐心等待下载完成,如果长时间没有下载完成,可以按 Ctrl + C 来取消任务后重新输入创建项目的指令) Project name (your_project_name) 输入项目名称,输入回车默认括号内的名称,括号内的名称是上面 quasa...
quasar携程框架_Quasar框架：构建响应式网站和混合移动应用程序
cuk5340的博客
07-19 849
quasar携程框架 类星体框架 (Quasar Framework) Build responsive websites and hybrid mobile Apps (that look native!) using same code, with VueJs. 通过VueJ使用相同的代码构建响应式网站和混合移动应用程序(看起来很自然！)。 网站 (websi...
实现 vue&react 混合开发项目步骤-微前端
最新发布
AIGC大前端小王子
04-23 968
vue+reacr混合开发项目场景
vue-quasar-admin:基于Quasar框架的Vue 2.0管理仪表板
05-02
vue-quasar-admin    是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站：响应式网站，渐进式应用，手机应用(通过Cordova)，跨平台应用(通过Electron)。   Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App 在使用Quasar的时候, 你甚至不需要Hammerjs, Momentjs, 或者Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到。   是基于Quasar-Framework搭建的一套包含通用权限控制的后台管理系统(目前只针对PC端)。 登录账号: admin 123 test 123456 website_admin 123456 请不要随意修改账号名称，其他操作随意，可通过右上角"数据初始化"按
前端框架 Quasar-Framework 简介
weixin_33711647的博客
03-18 2234
Quasar-Framework是一款基于vue.js开发的开源的前端框架,它能帮助web开发者快速创建以下网站 Github响应式网站渐进式应用手机应用(通过Cordova)跨平台应用(通过Electron) Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App和 Electron App在使用Quasar的时候,你甚...
quasar 实现vue根组件放两个标签
HouYing
01-13 544
yarn add vue-fragment import { Plugin } from 'vue-fragment'; Vue.use(Plugin); <template> <fragment> <q-tr v-show="parent.expand"> <q-td :auto-width="true"> <q-btn dense round .
quasar-demo-app
04-11
类星体应用（quasar-demo-app） Quasar Framework应用 安装依赖项 npm install 在开发模式下启动应用程序（热代码重新加载，错误报告等） quasar dev 整理文件 npm run lint 构建用于生产的应用 quasar build ...
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
:rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新Quasar版本的能力，您应该使用Quasar CLI ...
quasar-testing:为 Quasar Framework 1.0+ 测试 Harness App Extensions
07-23
App Extensions（例如这些测试工具）仅适用于 Quasar CLI，不适用于 Vue CLI，也不能通过软件包管理器直接安装软件包作为 npm 或 yarn。 使用quasar ext add ...否则安装步骤不会被执行，配置文件也不会被复制过来...
quasar-app-windows:带有Vue JS的桌面应用程序Windows
05-28
类星体应用Quasar Framework应用构建用于生产的应用 quasar create nombre-proyecto布局这是我们项目的主要模板，其中有导航菜单和导航栏，我们还有一个非常重要的组件，可以绘制页面路由器现在，我们将不涉及网站的...
Quasar Framework 基于 Vue.js的开源框架
Enya61的博客
03-20 521
Quasar Framework 是一个基于 Vue.js 的开源框架，用于构建跨平台的 Web、移动应用和桌面应用程序。该网站提供了关于 Quasar Framework 相关的指南、文档、示例代码、论坛等资源，帮助开发者更好地理解和使用该框架。可定制性受限：在某些情况下，可能需要更多的自定义需求，但是 Quasar Framework 的一些默认约定可能会限制了开发者的自由度。使用该框架和网站的感受：代码注释很清晰，细节到位，可以很好的满足自己的开发需求来去做更改，非常推荐！
quasar-admin-crm：Quasar CRM管理员| VueJS管理员| 具有3个不同的仪表板| 如果您觉得有用，请给它加星号
02-04
Quasar Admin CRM模板 适用于CRM需求的免费，精美的Quasar模板。 该模板还包括管理模板需求所需的各种功能。 CRM Admin是为CRM（客户关系管理）设计的功能类录模板。 它是使用Quasar框架构建的完全响应模板，可用于从大屏幕到智能手机的所有屏幕尺寸。 几个功能： 现代化的响应式设计 基于CRM的建筑设计 简单的CRM仪表板 导出功能 网站： ： 支持 如果这对您有所帮助，您可以通过支持我为该项目做出贡献： 请查看我的赞助商页面。 （GitHub当前使您的支持翻倍！因此，如果您以$ 5 / mo的价格支持我，我将获得$ 10的支持！ :winking_face: ） 非常
QuasarFramework利用VueJs2构建响应网站和混合移动应用程序
08-09
使用相同的代码，利用VueJs 2构建响应网站和混合移动应用程序（看起来原生！）。
基于Vue.js和使用的Quasar框架的免费Quasar管理模板。-Vue.js开发
05-27
基于Vue.js和使用的Quasar框架的免费Quasar管理模板。 Quasar管理模板基于Vue.js和使用过的Quasar Framework的免费Quasar管理模板。 站点：https://quasar-admin-demo.netlify.com/支持如果以任何方式对您有所帮助，您可以通过支持我为该项目的长期生存做出贡献：:purple_heart:支持我在GitHub上的开源工作确保查看我的赞助商页面。 （GitHub当前使您的支持翻倍！因此，如果您以$ 10 / mo的价格支持我，我将获得$ 20！他们是炼金术师:winking_face:）非常感谢！！！ 安装
Vue框架（二）------quasar简介及初始化
chucksun0426的博客
09-11 4869
根目录下：quasar.config.js，存放quasar配置项，里新增第三方组件需要在此文件内的。// 页面侧边栏提取组件。// 页面顶栏提取组件。
用Quasar开发Vue3+Electron跨平台应用的简单指南
军火库
12-15 1894
Quasar是一个开源的vue.js基础框架，简单配置即可在其基础上进行SPA, SSR, PWA, 手机网站以及跨平台应用程序的开发，本文将简述如何基于进行桌面应用开发。Quasar挺好用的，目前基于这套框架开发了几个桌面APP，也没碰到什么bug，他们前端组件升级更新啥的也很快。唯一不足就是中文文档和技术文章相对较少，碰到问题基本上要去看官网上的英文文档，不过还好英文文档还是挺 完善的。
图文并茂使用VUE+Quasar CLI开发和构建PWA
tangdou369098655的博客
06-25 952
manifest.json 是 PWA 配置 manifest 的文件。 这两个文件仅嵌入到生产版本中，而开发版本则跳过它们，就是说我们可以在代码里控制，开发版本不执行缓存，否则会影响我们写代码调试。 “register-service-worker.js”会自动导入您的应用程序（与任何其他/src文件一样）。它注册service worker（由Workbox或您的自定义工具创建，具体取决于工作箱插件模式 - quasar.conf.js> pwa> workboxPluginMode），您可以监听Ser
[前端] 如何使用Quasar创建应用
长路漫漫，以勤作车
02-26 1580
本篇文章主要介绍了如何搭建UI框架Quasar的环境，并且详细讲解了如何通过脚手架创建Quasar应用。
vue-quasar 使用图标方法
luoliwoshang的博客
06-21 2482
vue-cli 版本 4.5.13 1.添加quasar到vue项目中 虽然quasar有自己的脚手架，但是在使用过程中，与平常开发vue项目会有许多不同，所以添加quasar框架到vue项目中,即可达到开发者希望的效果 $ vue add quasar 接下来会在src下生成一个quasar.js的文件，此文件存放所有quasar框架的配置，我们的图标配置也应该存放在文件中 2.添加相应的图标库 quasar直接支持的库有Material Icons、Font Awesome、Ionicons、
用vue+uni-app写一个移动端界面
04-01
抱歉，作为AI语言模型，我无法提供具体的代码示例。但是，以下是一些可以帮助您开始使用Vue和Uni-app创建移动端界面的步骤： 1. 安装 Vue 和 Uni-app 首先，您需要在本地安装Vue和Uni-app。您可以使用npm或yarn来安装它们。在命令行中输入以下命令： ``` npm install -g vue npm install -g @vue/cli npm install -g @vue/cli-init npm install -g @dcloudio/uni-cli ``` 2. 创建一个新的Uni-app项目 在命令行中输入以下命令： ``` vue init dcloudio/uni-preset-vue my-project ``` 这将创建一个名为my-project的新Uni-app项目。 3. 编写Vue组件 现在，您可以开始编写Vue组件来构建您的界面。您可以将组件放在src/components目录中。 例如，以下是一个简单的Vue组件示例： ``` <template> <div class="my-component"> <h1>{{ title }}</h1> <p>{{ description }}</p> </div> </template> <script> export default { name: 'MyComponent', props: { title: String, description: String } } </script> <style scoped> .my-component { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } h1 { font-size: 24px; margin-bottom: 10px; } p { font-size: 16px; } </style> ``` 4. 添加组件到页面 现在，您可以将组件添加到页面中。您可以在pages目录下创建一个新的页面，并在该页面中引用您的组件。 例如，以下是一个简单的页面示例： ``` <template> <div class="my-page"> <my-component title="Hello World" description="This is a test component"></my-component> </div> </template> <script> import MyComponent from '@/components/MyComponent' export default { name: 'MyPage', components: { MyComponent } } </script> <style scoped> .my-page { padding: 20px; } </style> ``` 5. 运行应用程序 现在，您可以在命令行中输入以下命令来启动您的应用程序： ``` npm run dev:mp-weixin ``` 这将启动一个本地开发服务器，并在微信小程序中显示您的应用程序。您可以使用微信开发者工具来查看您的应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值