【入门】 quasar framework 简易入门

前言

估计很多接触 quasar framework 的新朋友看了一遍文档后还是有点云里雾里,不知道怎么着手或遇到不少问题。本简易教程让你迅速启动 quasar framework 的 demo,为进一步项目开发打下基础。

开发环境

操作系统: win7 sp1

准备

安装依赖

(1)nodejs + npm:
nvm 安装多版本 nodejs

(2)cnpm:

npm 下载太龟速了吧... 先安装 cnpm,使用淘宝镜像,这样下载包就飞快啦。
windows 命令行输入 $ npm install -g cnpm --registry=https://registry.npm.taobao.org

(3)yarn

$ cnpm install -g yarn

不用国内镜像下载包太龟速了,使用国内镜像加速 yarn:

$ yarn config set registry https://registry.npm.taobao.org

(3)quasar-cli:
windows 命令行输入

$ yarn global add @quasar/cli( 推荐, 1.x 新版本)

$ cnpm install -g @quasar/cli( 不推荐,1.x 新版本)

$ cnpm install -g quasar-cli(0.x 老版本)

创建项目并启动

创建项目

命令行进入要创建项目的目录, 比如说 d 盘
d:

创建名为“quasar-demo”项目:
$ quasar create quasar-demo(1.x 新版本)

$ quasar init quasar-demo(0.x 老版本)

运行后会问你一些问题,如果你只是入个门,狂按回车就搞定了(默认值)。当然,如果你是真的想开发项目,那就仔细看看那些问题吧,按你自己的设置创建项目。

主要是以下问题

  • 项目名、作者名之类
  • 选择 css 预处理器
  • 是否使用 eslint:eslint 为 JS 语法校验, 会帮你检查 js 语法错误和形成团队的代码规范。
  • 是否支持 ie11
  • 是否自动安装依赖包,以及哪种形式安装(yarn 或 npm): 没装 yarn 的话还是选否吧,npm 安装包真的很慢...
  • 其它...

好了。运行成功后会在 d 盘根目录创建名为“quasar-demo”的文件夹,里面有自动生成的项目文件。

依赖包安装(可选 )

在项目所在目录,命令行输入:

$ yarn install

或者

$ cnpm install (不推荐,使用 npm/cnpm 会有点问题,包括开发时不能热重载,无法支持 IE11,历史项目启动会出错等)

这个步骤是可选的,如果没有安装依赖包的话需要先安装,不然项目跑不起来。

开发模式启动

在项目所在目录,命令行输入:
$ quasar dev

默认是 SPA 模式,要改其它模式,加 -m <pwa/electron/cordova/capacitor>
默认是 Material 主题,要改成 ios 主题, 加 -t ios
端口冲突? 加 -p < 端口号 >

什么,提示在哪个文件的哪行有 eslint 语法错误?别慌,根据提示将相应文件里的语法问题解决 (我遇到的错误是在一行代码最后多了个分号,删掉就行了),再重新运行命令就可以了。
启动成功。可以在本地查看 quasar 的初始页了。

好了,要在初始页增加组件,请查看文档吧。在开发模式下,任何修改刷新后就会立即显示哦。

部署

构建

在 quasar-demo 目录下执行
$ quasar build

默认是 SPA 模式,要改其它模式,加 -m <pwa/electron/cordova/capacitor>
默认是 Material 主题,要改成 ios 主题, 加 -t ios
cordova 模式下,默认构建目标平台是 Android,要改成 ios 平台, 加 -T ios

如果构建成功,将会在 dist 目录下生成目标文件夹。

服务器部署

具体请参考 Quasar Framework 中文网里面相应模式的部署章节。 SPA 模式最简单,将构建好的目标文件夹扔到 WEB 服务器 (比如 IIS, nginx, apache 等) 上就行了。