iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列 第 2

[Day 2] Vue Quasar Framework 環境佈署

安裝

昨天安裝完 今天就直接來佈署環境囉 ~ !

$ quasar init <folder name>

接下來會有介面要來引導你安裝

Project name (internal usage for dev) 
//給你確認專案名字 `注意 這邊只能小寫`

Project product name (official name) 
//填上專案的產品名稱 (這邊會寫進 package.json)

Project description 
//填上專案的敘述  (這邊會寫進 package.json)

Author
//作者 有git會自動放git的使用者帳號

Check the features needed for your project: 
//選擇要一起安裝的插件
 ◯ ESLint //用來維護程式碼品質的 好(煩人?!)東西
 ◯ Vuex   //前端倉儲
 ◯ Axios  //主要拿來接API
 ◯ Vue-i18n //多國語系
 ◯ IE11 support 
 
 
Cordova id (disregard if not building mobile apps) 
//如果有要轉Cordova可以填  沒有的話直接跳過也可以
 

選擇一起安裝的插件我基本上都會選Vuex
其他就看個人需求,這邊就裝好能省去之後自己裝還要做設定

檔案結構

這邊其實官方文件就有了 不過是英文的

我就直接搬過來講 原文

 .
├── src/
│   ├── assets/              
│   ├── statics/             
│   ├── components/          # 給你放components的
│   ├── css/                 
|   |   ├── app.styl
|   │   └── themes/          
|   │       ├── common.variables.styl # 在這邊寫的CSS能蓋掉Quasar自己元件預設的CSS
|   │       ├── variables.mat.styl    # Material 主題的變數
|   │       └── variables.ios.styl    # iOS 主題的變數
│   ├── layouts/             # 內建的layout頁面會放這裡
│   ├── pages/               # 內建的頁面也都在這
│   ├── plugins/             # 之後自己新增的插件會放這邊
│   ├── router/              # 放Vue Router的東西 這邊就不多介紹
|   |   ├── index.js         
|   │   └── routes.js        
│   ├── store/               # 放Vuex Store的東西 這邊也不多介紹
|   |   ├── index.js         
|   │   ├── <folder>         
|   │   └── <folder>         
│   ├── App.vue              # 最起始的 Vue component
│   └── index.template.html  # index.html 的模板
├── src-ssr/                 # 有使用 SSR 功能才會有這個
├── src-pwa/                 # 有使用 PWA 功能才會有這個
├── src-cordova/             # 有使用 Cordova 功能才會有這個
├── src-electron/            # 有使用 Electron 功能才會有這個
├── dist/                    # 當你 build 你的專案時會放這裡
│   ├── spa-mat/             # 資料夾名稱會依照你的<功能>跟<主題>來定義
│   ├── spa-ios/             
│   ├── electron-mat/        
│   └── ....
└── quasar.conf.js           # Quasar 的 Config 資料夾 **非常重要 大部份東西都會在這邊改**



取代 main.js 的 quasar.conf.js 設定檔

原先Vue的環境中,要增加新的插件都會到 main.js 裏面去修改
不過在Quasar中 直接被這個檔案來取代掉了
找不到的朋友們別擔心 就在這裡啦!

這邊可以設定哪些東西?

  • 引用Quasar內建的元件,可以不用在每個地方瘋狂import components啦
  • I18n 這邊也幫你設定好囉,直接就能用不用再翻文件去做設定
  • icons 移掉註解就能用,也省去引入的時間
  • 開發模式下的HTTPS及port設定
  • CSS動畫 設定
  • 其他外部 插件的設定 (之後會再解說)
  • PWAmanifest 等設定
quasar.conf.js裡面的東西有點多,就拆到明天來講囉 XD

上一篇
[Day 1] Vue Quasar Framework介紹與安裝
下一篇
[Day 3] Vue Quasar Framework 淺述設定檔 quasar.conf.js
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言