iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Modern Web

前端網頁設計學習旅程系列 第 27

Day27_Vuejs-hello world

VueJS目前算是比較熱門的前端語言,官方文件也相對清楚。
下面試著跟著網路上的資源,建置一個 hello world 的專案

Node.js

首先到官網下載安裝Node.js
安裝完後檢查是否安裝成功

//檢查nodejs版本
node -v
//檢查配置
npm config get registry

Vue.js

安裝vue也很容易,以官方提供的CLI指令進行安裝即可

// 安裝最新版本 vue 版本 
npm install -g @vue/cli
// 檢查版本
vue -V

如果安裝過程中失敗,可能是因為node.js的版本過低
照著以下的語法即可更新node.js的版本

// 清除npm cache
sudo npm cache clean -f
// 安裝nodejs最新版本
sudo npm install -g n
// node 確認最新版本
sudo n stable
// node 安裝指定版本
sudo n x.x.x

建置專案

參考官方網站,建立一個hello-world的專案
安裝過程中會讓你選擇版本,或是手動配置
新手當然是選擇版本3的自動配置拉

vue create hello-world

初始專案

等一陣子安裝完成後,進入到專案資料夾
執行指令,就可以啟動專案拉

npm run serve

初始頁面

啟動專案後,畫面會提示初始網址
使用瀏覽器開啟 http://localhost:8080/ ,就可以看到預設畫面拉
https://ithelp.ithome.com.tw/upload/images/20201009/20130503FKAiOyrBzg.png


上一篇
Day26_Deploy-CloudFront
下一篇
Day28_vuejs-get starts
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言