Try   HackMD

Vite + Vue3 + Bootstrap5(Part1)

tags: Vue3、Vite、Bootstrap5

最近跟著六腳學院的 Bootstrap5 學習課程
基於在 Vue 這框架比較熟悉，這邊做一個引用的筆記
還有這篇是首次練習用 MD 檔做筆記，做一個練習的筆記開端

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
開始吧!

Step1 利用 Vite 建立一個新的空專案

Vite 是一個新的打包工具。目的是為了解決 WebPack 一些打包上的缺點而誕生，在使用上也不是 Vue 專屬使用。@vitejs/create-app 透過這個連結，可以看到其他的樣板。

假定各位已經安裝 nodejs(14

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
)、vs code

找一個空目錄，並執行以下指令

npm init @vitejs/app my-vue-app -- --template vue

做完後會有以下的畫面，接著我們按照畫面的步驟執行

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

當執行完至最後一個步驟

npm run dev

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

我們開啟瀏覽器敲入 localhost:3000，看到畫面正常的出現。

就代表我們專案建立成功!

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Step2 新增 Bootstrap5

Bootstrap5 官方有說明幾種使用方法

  1. 利用 CDN
  2. 利用 npm i bootstrap

這邊會對這兩種方式做一個說明筆記

CDN

這個方式基本上沒有甚麼太大的問題

在 index.html 內加入 CSS、JS 的引用

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"/>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

接著我們在 app.vue 內做一些元件的新增做測試

NavBar 這個元件做測試(純粹為了美觀而選擇)

找到這個元件並複製起來

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

app.vue 內找到以下程式碼並貼上，如下圖

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

完成後因為畫面會有一點跑版，我們將樣式做一些調整

找到 margin-top:60px 將他註解

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

接著重新看到畫面，並且可以正常使用。代表我們引用 Bootstrap5 成功

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

npm i bootstrap

使用這個方式，我們先將剛剛 index.html CDN 的部份移除

並執行

npm i bootstrap

接著在 main.js 新增 CSS、JS 的引用

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

一些簡單的引用說明大概是到這裡，謝謝觀看~
下一次在聊聊怎麼用 SCSS 的方式 import 並且遇到了一點小麻煩該怎麼處理

Last changed by 
 
chinggo's HackMD
過去的筆記: https://www.dotblogs.com.tw/chinggo0216
2
1
6154

Read more

.Net6 陰影複製 (Shadow-copying) 失敗

最近有機器重建

Oct 9, 2024
透過 ps1 部署 .Net 程式到 IIS 內

$projectPath = &quot;&lt;專案路徑&gt;.csproj&quot; # 例如 &quot;D:\1.Prestige\CorrInOneNet6\CorrosionMonitoringSystemNet6\CorrosionMonitoringSystemNet6.csproj&quot;$publishFolder = &quot;&lt;發佈資料夾&gt;&quot; # 例如 &quot;D:\publish\CorrosionMonitoringSystemNet6&quot;

Oct 4, 2024
Video.js

載入 Video.js 相關的 js 、css 工具。下面由 CDN 載入相關工具 &lt;link href=&quot;https://vjs.zencdn.net/8.16.1/video-js.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;!-- &quot;core&quot; version of Video.js --&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video.min.js&quot;&gt;&lt;/script&gt; &lt;!--Video.js 支援串流 plugin--&gt; &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@videojs/http-streaming@3.10.0/dist/videojs-http-streaming.min.js&quot;&gt;&lt;/script&gt; 在需要使用 video 的位置放入 &lt;video-js&gt; 的客製化的 html Tag &lt;video-js

Sep 16, 2024
JS 使用 c# 的 string.Format

探討在 .cshtml 裡面定義了一些文字樣板要跟 js 共用

Sep 3, 2024
Read more from chinggo's HackMD
Published on HackMD