目前待業在家所以就想寫一些新手也可以比較好入門的文章
程式入門的部分我會站在完全不會的新手角度去想
有點基礎的可以跳過這篇文章
也希望這些文章可以對想轉職的或是對Vue有興趣的人有些幫助
找到工作後不確定會不會繼續寫文章如果不忙的話我會把他寫完整
什麼是 Vue.js？
Vue.js是一個用於構建用戶界面的開源JavaScript框架。
它由尤雨溪在2014年創建，並於當時迅速成為了一個受歡迎的選擇。
Vue.js的核心專注於視圖層，同時它也可以輕鬆地與其他工具和庫配合使用，這使得它成為了一個極具彈性和擴展性的解決方案。
Vue.js框架
- 基於HTML、CSS、JavaScript
- 模板、回應式、組件設計
- 漸進式框架適合各種開發環境
- 目前主要版本是第三版
Vue.js常被用在哪些地方？
單頁應用程式（SPA）：
Vue.js 在單頁應用程式的開發中表現出色。
單頁應用程式是指在加載時將所有必要的程式碼一次性加載到瀏覽器中，之後頁面的內容通過 JavaScript 動態更新，從而實現快速響應和流暢的用戶體驗。Vue Router 是 Vue.js 的官方路由管理器，可以幫助開發者輕鬆地實現單頁應用程式的路由功能。
動態網頁和交互式用戶界面：
Vue.js 通過簡潔而強大的語法和組件化開發方式，非常適合構建動態網頁和交互式用戶界面。
開發者可以利用 Vue.js 快速構建各種交互式的元素，如表單、按鈕、模態框等，使用戶能夠更方便地與網頁進行交互。
移動應用程式：
Vue.js 可以與一些移動開發框架（如 Ionic、Quasar 等）結合使用，用於構建移動應用程式。這些框架允許開發者使用 Vue.js 來構建跨平台的移動應用程式，從而節省開發時間和成本。
前端工具和庫：
Vue.js 可以與其他前端工具和庫（如 Vuex、Vue Router、Vuetify 等）配合使用，用於構建複雜的前端應用程式。
這些工具和庫提供了豐富的功能和組件，可以幫助開發者更快地構建出功能完善、性能優異的前端應用程式。
小型專案和原型設計：
由於 Vue.js 的簡單易學性和快速上手的特點，它也常被用於構建小型專案和原型設計。
開發者可以利用 Vue.js 快速構建出原型，驗證想法，並在需求明確後進一步完善應用程式。
我想開始學習該安裝甚麼呢?
- 安裝Visual Studio Code
- 安裝Node.js
- 利用Visual Studio Code的TERMINAL介面創建專案
- 安裝專案所需第三方套件
- 執行、測試專案
上述為這章節會教的所有內容
安裝Visual Studio Code
Google搜尋 Visual Studio Code
通常第一個就是，選擇Download
選擇個人作業系統的版本，我這邊示範是使用Windows10
安裝基本上就是一直下一步即可
安裝Node.js
Google搜尋 Node.js
基本上就跟安裝VScode一樣
不同的是這邊會選擇LTS版本而非Current
LTS是穩定版Current則是最新版
通常開發都是用穩定版即可
利用Visual Studio Code的TERMINAL介面創建專案
VScode與node.js安裝完成後將VScode開啟
左上方File選擇Open Folder 也就是開啟資料夾
這邊我選擇新建一個code資料夾並且在裡面再新增一個資料夾 New Folder來放置這個專案
完成後我們將需要使用終端機(TERMINAL)
終端機在VSCODE下方需要用滑鼠去拉出
可以看到下方我輸入了 cd vue 這個指令
cd 為移動到 vue為資料夾
也就是移動到uve這個資料夾
這個資料夾位置要確保跟你所建立的位置是相同的不然會出現錯誤
例如你的資料在D槽的code的vue裡面
你可以輸入cd D:\code\vue 以此類推
準備好資料夾後我們要進行加入專案的動作
輸入 npm init vue@latest
他會問你專案名稱 這邊我們使用 helloworld
並且會問你是否需要安裝額外套件
除了第三個目前我們都不會用到所以只將第三個YES即可
這樣專案就創建完成
安裝專案所需第三方套件
cd hellowowrld 進入專案資料夾
接著要來安裝第三方套件這個動作是將你專案底下所需的套件都進行安裝
需要輸入指令npm install
完成後就會看到這畫面代表成功
執行、測試專案
輸入 npm run dev
這段代碼的意思是啟用dev腳本
這個動作可以將預設腳本的伺服器開啟
查看是否安裝成功
看到上述畫面就是已經架設成功
點網址進入看看
看到這畫面就是已經確認Vue安裝完成且伺服器能夠成功啟動
下一篇會教最基礎的一些語法應用
創作內容
【程式入門】Vue.js 從零開始：初學友好的前端框架
程式入門 (7)