iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用vue.js寫出一個實用的科內分享網站 系列

常看到許多網站教學如何寫出一個漂亮的網站,但很少有教學寫出一個實用且實際上能用的網站,所以我想以一個實際上有作用,而且能使用的角度下用vue.js去雕刻一個網站,並且在我們公司有測試環境所以能夠模擬真實網站需要上架的情況,並供科內的同仁使用,那主題就定為科內分享網站

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1為什麼使用要做網站勒?

【前言】 其實有蠻多很有趣的的主題,最後會選擇做一個平庸的網站,原因是想要圓一個大學時期的後悔 大學讀的是資訊管理,有一堂課是WEB後端網站,老師提供了一個方便...

2021-09-13 ‧ 由 喬飛 分享
DAY 2

Day2安裝vue我選擇的是vue3!!

我的編譯器使用vscode在終端機下 vue create XXXX(檔案名稱)即可看到這個畫面 (要先安裝node.js 這邊就不多做贅述了XD) 再來這邊選...

2021-09-14 ‧ 由 喬飛 分享
DAY 3

Day3大哥我錯了我選擇vue2

接續昨天我們要決定使用哪一個前端框架 最後我選擇使用vuetify 使用前端框架的用意是讓我們的網站變得水水(漂漂) 而且前端框架的網格系統(grid)使得我們...

2021-09-15 ‧ 由 喬飛 分享
DAY 4

Day4給你一個導覽列大家說好不好

今天從導覽列開始做 首先先把 components裡的helloword .vue 跟有import helloworld.vue的文字刪除 v-main v-...

2021-09-16 ‧ 由 喬飛 分享
DAY 5

Day5給你一個漂漂的導覽列大家說好不好!

延續昨天,今天來完成一個導覽列吧!! 首先先在components創一個navbar.vue 像昨天那樣直接創在app.vue不是一個好的範例,最好把組件分開...

2021-09-17 ‧ 由 喬飛 分享
DAY 6

Day6一個網站總需要一點首頁吧!

延續昨天 今天從首頁開始下手 我的首頁想放入科內同仁的文章(類似ptt部落格的感覺) 跟之前一樣去vuetify網站看看有沒有適合的tag作為載體 我所使用的是...

2021-09-18 ‧ 由 喬飛 分享
DAY 7

Day7綁手綁腳綁Class

延續昨天 今天主要研究如何把v-for裡面的item做一個客製化的css或是icon 找了許久發現一篇不錯的影片也是在教vuetify怎麼使用 裡面則提到如何用...

2021-09-19 ‧ 由 喬飛 分享
DAY 8

Day8燈燈燈燈登入

延續昨日 今天來研究一下登入! 首先要先有一個登入畫面 在views新增一個檔案 檔案名稱叫做login.vue 再來直接複製about頁面的全部東西 再來...

2021-09-20 ‧ 由 喬飛 分享
DAY 9

Day9傑森史塔森#vue.js資料庫使用json server

延續昨天 今天要來做註冊頁 把註冊的按鈕給加了上去 以下是目前頁面 那我們就開始搞註冊頁吧! 跟day8的流程一樣就不多贅述了 總之我新增了一個registe...

2021-09-21 ‧ 由 喬飛 分享
DAY 10

Day10你敢不敢給我登入

延續昨日 有了資料庫之後再來就是想想如何登入! 登入的意思就是你輸入的帳號密碼都和資料庫的帳號密碼一樣 了解了這個思路接下來就來實作看看 首先 在終端機下jso...

2021-09-22 ‧ 由 喬飛 分享