更新於 2024/08/30發佈於 2022/08/31閱讀時間約 3 分鐘

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

Create project

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

vue create vue-demo

1. Pick a preset

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

2. Select the features

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

3. Choose the version of vue

選擇 vue3

4. Use class-style component syntax?

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

5. Use Babel alongside TypeScript?

裝

6. Use history mode for router

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

7. Pick a CSS pre-processor

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

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

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

9. Save this as a preset for future projects?

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

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

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

Run serve

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

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

分享至

成為作者繼續創作的動力吧！

Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

追蹤

付費閱讀

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

Create project

2. Select the features

3. Choose the version of vue

4. Use class-style component syntax?

5. Use Babel alongside TypeScript?

6. Use history mode for router

7. Pick a CSS pre-processor

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

9. Save this as a preset for future projects?

Run serve

張哲嘉的沙龍的其他內容

你可能也想看

發表回應

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

Create project

2. Select the features

3. Choose the version of vue

4. Use class-style component syntax?

5. Use Babel alongside TypeScript?

6. Use history mode for router

7. Pick a CSS pre-processor

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

9. Save this as a preset for future projects?

Run serve

張哲嘉的沙龍 的其他內容

你可能也想看

發表回應

張哲嘉的沙龍的其他內容