從 0 到有 vue3 前端工程師養成 — part 2: create a Vue project
更新於 發佈於 閱讀時間約 3 分鐘
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/ 就可以看到畫面了。
為什麼會看到廣告
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。
而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。