iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0
佛心分享-SideProject30

最近的工程師真沒用系列 第 7

第七天-Svelte 啟動

  • 分享至 

  • xImage
  •  

終於要開始裝 svelte 啦

npx sv create my-app

接著
Which template would you like?

SvelteKit minimal
接著
Add type checking with TypeScript?

Yes, using TypeScript syntax
接著
What would you like to add to your project? (use arrow keys / space bar)

prettier, eslint
接著
Which package manager do you want to install dependencies with?

npm
你會發現裝失敗了,為甚麼呢?因為專案是在本地,他本身映射到虛擬機時,她其實已經使用了 link 技術,但現在 npm 安裝套件他又需要再次 link ,因此會出現

npm error EPROTO: protocol error, symlink

之類的訊息
那我們該怎麼辦呢
有兩個解法,一個就是 windows 安裝 node 然後直接外部安裝好
另外一個解法就是使用 linux 的 bind 功能,讓 npm install 跑的時候,他實際上是裝在虛擬機裡面
那麼怎麼做呢?很簡單我們只需要

mkdir -p /home/vagrant/vagrant_node_modules
mkdir -p /opt/u22_side_dev/my-app/node_modules
mount --bind /home/vagrant/vagrant_node_modules /opt/u22_side_dev/my-app/node_modules
npm instasll

安裝就成功囉
接著我們需要回到 vagrant 檔案,啟動
加上

config.vm.network "forwarded_port", guest: 5173, host: 5173

加上這一行是為了讓 npm run dev 的結果我們有辦法透過 127.0.0.1:5173 直接查看
喔,別忘了
package.json 需要把 dev 那行改成
"dev": "vite dev --host 0.0.0.0"
這樣我們就可以 windows 打開瀏覽器查看 127.0.0.1:5173 直接查看到虛擬機裡面的結果了
看到 Welcome to SvelteKit 囉!

打完收工!

今天的情緒抒發:
看到別人都開始寫 AI 相關之類的,我突然覺得我是不是沒必要寫下去了ww
不行!!我要堅持!!這次鐵人賽就是為了自己實打實的學東西!


上一篇
第六天-開發環境建置(系統與編輯器的聯動)
下一篇
第八天-Svelte DaisyUI 超合體
系列文
最近的工程師真沒用10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言