從 0 到有 vue3 前端工程師養成 — part 2: create a Vue project

更新 發佈閱讀 4 分鐘

Create project

裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉

vue create vue-demo

1. Pick a preset

vocus|新世代的創作平台

這裡我們選擇 Manually select features,去裝好一定會需要用到的套件, 如果選擇 Default,會裝的太簡略,很多很重要的套件像是 vue-router, vuex 都要之後自己再裝。 上下鍵是切換選項,空白鍵是確定選擇,按下 Enter 做下一步設定。

2. Select the features

vocus|新世代的創作平台

這裡 Choose Vue version, Babel 要選,本篇以 typescript 開發,所以 Typescript 要選, Router, Vuex 和 CSS Pre-processors 也是非常重要,必選,之後的篇章會再詳細介紹。

3. Choose the version of vue

vocus|新世代的創作平台

選擇 vue3

4. Use class-style component syntax?

vocus|新世代的創作平台

這是在問你要不要用 class 風格的裝飾器,像原本創建 vue 實例 長得像這樣: home = new Vue() 用裝飾器後會像這樣: class home extends Vue{} 我自己是看不習慣啦,所以不裝。

5. Use Babel alongside TypeScript?

vocus|新世代的創作平台

6. Use history mode for router

vocus|新世代的創作平台

選 no 的話,路由會掛在 # 底下,很醜

7. Pick a CSS pre-processor

vocus|新世代的創作平台

原生 css 其實不好用,用這種預處理器,樣式好寫很多, 連迴圈, function 都能寫,目前 Sass/Scss 最多人用,Stylus 也蠻好用的, Less 好像有些雷的地方,我自己主要是用 Sass/Scss。

8. Where do you prefer placing config for Babel, ESLint, etc.?

vocus|新世代的創作平台

像 babel, eslint 這些套件的設定檔,你想各別存放還是統一寫在 package.json 裡。

9. Save this as a preset for future projects?

vocus|新世代的創作平台

之後的專案是否都套用現在的設定?

貼心提醒: 如果你有用 dropbox, google drive 等雲端硬碟在備份的話建議先暫停備份, javascript 有一個黑洞叫做 node_modules,讓我形容一下有多黑

vocus|新世代的創作平台

請不要備份 node_modules,專案需要的套件都會記錄在 package.json 裡, 之後在別的電腦想裝回這些套件,只要在終端輸入 npm install 就可以裝回來了。

vocus|新世代的創作平台

Run serve

進入專案路徑,在終端輸入 npm run serve 就可以把專案跑起來了

vocus|新世代的創作平台

然後打開瀏覽器輸入 http://localhost:8080http://172.21.1.139:8080/ 就可以看到畫面了。

vocus|新世代的創作平台
留言
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
看更多
你可能也想看
Thumbnail
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
Thumbnail
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News