quasar-framework學(xué)習(xí)筆記

官方網(wǎng)站： http://quasar-framework.org/

一、安裝

    1、  安裝quasar-cli

        npm install -g quasar-cli

    2、  使用quasar starter kits初始化項(xiàng)目

        quasar提供了多套開發(fā)套件，可以使用quasar list查看當(dāng)前可用的套件

        其中官方提供5套開發(fā)套件，使用方法如下

        quasar init <starter_kit_name> <folder_name>

        例如想安裝默認(rèn)套件，安裝到當(dāng)前目錄的demo文件夾下

        quasar init default demo ，  然后進(jìn)入demo目錄npm install即可

二、開始使用

        1、quasar支持通過開發(fā)模式啟動(dòng)，支持熱重載

        可以通過    quasar dev [theme] 來啟動(dòng)項(xiàng)目

        例如：

        quasar dev 或者 quasar dev mat 使用mat主題啟動(dòng)

        quasar dev ios 使用ios主題啟動(dòng)

        使用default套件安裝啟動(dòng)后：

        使用pwa套件安裝啟動(dòng)后：

        剩余的0.13版本，webpack1和vue1在此就不做贅述了

        另外發(fā)現(xiàn)非官方提供的這個(gè)meteor安裝后 quasar dev會(huì)報(bào)錯(cuò)：

        2、模板

        一些通用頁面框架，可以在根目錄下的templates文件夾下提前寫好，需要?jiǎng)?chuàng)建新頁面時(shí)，直接通過 quasar new [templates文件夾下的模板文件] [文件名稱]

        使用default套件搭建好項(xiàng)目后，templates下默認(rèn)會(huì)給出三個(gè)模板，layout，page，component，也可以自己在里寫好。以layout舉例：

        quasar new layout temp

        這是src/components下就會(huì)多出一個(gè)根據(jù)layout模板創(chuàng)建好的temp.vue文件，文件的內(nèi)容與layout頁面一模一樣

        3、演示app

        通過quasar dev --play 啟動(dòng)時(shí)可以同時(shí)生成一個(gè)二維碼

        手機(jī)掃描后可直接查看頁面

        酷炫！