用Vue CLI 3 + Vuetify 製作說明頁面 | vue新增頁面
本篇最後會產生的頁面在這:https://plugins.letswrite.tw/[1]關於「套件集合站」集合站是寫給同事看的,有一些網站常用的功能不一定要前端手刻才可以使用,網路上很多猛人寫了套件後開放給大家使用,而那些套件的說明文件跟demo有些都蠻齊全的。通常對於使用套件會遇到的問題就是,同一個功能,比方輪播,就有很多人有出套件:Slick、OwlCarousel、Swiper……等,或是說明文件都英文,參數又多,等研究完了前端也差不多寫好了。當初會製作這個套件集合站就是為了解決這二個問題。首先,從常用的套件中挑出一個覺得好用的、常用的出來,...
本篇最後會產生的頁面在這:
https://plugins.letswrite.tw/[1]
關於「套件集合站」集合站是寫給同事看的,有一些網站常用的功能不一定要前端手刻才可以使用,網路上很多猛人寫了套件後開放給大家使用,而那些套件的說明文件跟demo有些都蠻齊全的。
通常對於使用套件會遇到的問題就是,同一個功能,比方輪播,就有很多人有出套件:Slick、Owl Carousel、Swiper……等,或是說明文件都英文,參數又多,等研究完了前端也差不多寫好了。
當初會製作這個套件集合站就是為了解決這二個問題。
首先,從常用的套件中挑出一個覺得好用的、常用的出來,比方輪播就選用了Slick。
接著,附上要引用的js、css的cdn網址,並加入一鍵copy路徑的功能。
最後,在CodePen上寫個使用的範例,iframe到頁面中。
原本的頁面是用Vue CLI 2開發,UI是用Vuetify 1.5.x版。最近在看Vue CLI 3,又發現Vuetify升到2.0.5版了,就想說不然來更新一下集合站,當作練習,也順便記錄一下開發的過程。
本篇使用資源本篇用到的資源如下:
本文最後會附上套件集合站整理過的原始碼。
安裝Vue CLI 3安裝Vue CLI 3之前,必須先安裝Node.js[2],官方是推薦8.11.0以上的版本。
裝完Node.js後,開啟終端機,輸入以下命令:
npm install -g @vue/climac的話前面要多輸入「sudo」。
安裝完後,要檢查有沒有安裝成功,就在終端機輸入:
vue --version如果有出現版本號就代表成功了。
建立Vue CLI 3專案在目錄底下開啟終端機,輸入:
vue create 專案名稱接著選擇「Manually select features」,就會出現安裝的選項:
Vue CLI 3 安裝選項這邊就簡單的用編ES6的Babel跟控各頁網址的Router。按下Enter後就會問3個問題。
Router用history mode。
config一起寫進package...