iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

每日挖個坑,用坑填起耍廢聊天室! 系列

使用Vue系列的Nuxt和socket從頭建立一個偽裝編輯器聊天室

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

一個坑,塞進一顆菜呱

一個起笑在最後一天報名,其實我是來挑戰從挖坑到放棄的過程(誤 這次的系列是要從零開始蓋一個偽裝成vscode編輯器的聊天室,目的就是為了要上班耍廢,然後耍...

2019-09-17 ‧ 由 挖洗菜呱 分享
DAY 2

二個坑,一個坑裡有Nuxt,一個有Socket

坑裡怎麼會是Nuxt Nuxt是我開始前端工作第一個專案用的框架,當初選Nuxt主因是基於Vue,且可以處理Server Side Render,SEO上的問題...

2019-09-18 ‧ 由 挖洗菜呱 分享
DAY 3

三號坑,裝起nvm,開挖Nuxt

裝個nvm 我們會用到node.js,雖然也可以直接在node官網下載安裝,但這樣就只有一個版本,在開發上我們有時候會需要切換到不同版本的node,nvm就是可...

2019-09-19 ‧ 由 挖洗菜呱 分享
DAY 4

四號坑,在Nuxt資料夾內翻滾

Nuxt安裝好後自動產生的資料夾 Nuxt安裝好後會自動產生一大堆資料夾,每個資料夾都有定義好該做的事情 assets:需要webpack編譯的資源,例...

2019-09-20 ‧ 由 挖洗菜呱 分享
DAY 5

五號坑,造個路vue-router送你到各地

先來造個路吧!使用vue-router設定從網址下不一樣的內容走到對應的頁面。 我們先在pages資料夾內新增一個檔案夾叫做chat,並增加一支index.vu...

2019-09-21 ‧ 由 挖洗菜呱 分享
DAY 6

六號坑,templete和.vue拆分檔案小知識

延續上一篇的templete內容 會想到要補充這段是因為朋友前陣子有問到XD 上一篇用到的template: <template> <di...

2019-09-22 ‧ 由 挖洗菜呱 分享
DAY 7

七號坑,架起編輯器聊天室的筋骨,關於Nuxt Layout使用

先讓我們來看一下vscode的畫面 畫面架構 主要結構就是橘色的sidebar、綠色的聊天視窗跟紫色的Terminal輸入區。 sidebar會固定在瀏覽器左...

2019-09-23 ‧ 由 挖洗菜呱 分享
DAY 8

八號坑,安裝激怒人心的SCSS

雖然安裝SCSS這件事拿出來寫一篇是有點無聊但被他坑了一次,所以就想寫!! 要在Nuxt使用SCSS or SASS,要安裝node-sass和sass-loa...

2019-09-24 ‧ 由 挖洗菜呱 分享
DAY 9

九號坑,偽裝vscode介面建起來-sidebar

今天就先把基本的介面框框弄起來! 先看結果: 如果問我說,左邊那些icon跟下面的terminal是幹嘛的,我只能告訴你,完全沒用阿哈哈哈哈哈哈目前沒想到可以...

2019-09-25 ‧ 由 挖洗菜呱 分享
DAY 10

十號坑,終於做首頁啦~

今天來做右半邊先處理一下layouts > default裡的maincss加上 .main { padding-left: 200px; //...

2019-09-26 ‧ 由 挖洗菜呱 分享