Giter VIP home page Giter VIP logo

library_bar's Introduction

Library Bar

原先資料說明在 Hackmd,這邊只是說明如何執行。

檔案目錄說明 (在 hosting 資料夾)

  • dist 資料夾是放編譯完檔案。
  • img 資料夾是放圖片檔。
  • pages 資料夾是放網頁檔案的所在處。
    • 每一個網頁需要建立一個資料夾。
  • script 資料夾是放JS。
  • style 資料夾是放CSS。
  • vite.condfig.ts 檔案是放網頁路徑修改。

⚠️⚠️⚠️ 以下執行的路徑,都要切到 hosting 資料夾路徑底下 ⚠️⚠️⚠️

使用 PowerShellcmd (命令提示字元) 進行 npm 指令,如果 npm 指令不能跑,請先安裝 node.js,版本的部分請先根據自己的作業系統做合適的選擇。

如果 npm 套件有跳遺失,請記得補裝套件。

基本步驟

使用 PowerShellcmd (命令提示字元) 輸入切換路徑指令到 hosting 資料夾路徑底下。

⚠️注意:根據自己的路徑做切換,以下是範例。

cd C:\Users\user\Desktop\Library_Bar\hosting

安裝依賴項 (第一次安裝就好)

npm i

執行測試

npm run dev

按下 o 鍵查看首頁有沒有正常顯示,確認完網頁都正常後按下按下 q 鍵離開。

  • press r to restart the server
  • press u to show server url
  • press o to open in browser
  • press c to clear console
  • press q to quit

重新編譯測試檔

npm run build

測試編譯完的檔案

npm run preview

查看網頁路徑,其他頁面也是:

確認編譯後的網頁沒問題之後,按 Ctrl + C 退出。

開始部署 (沒事不要部署)

安裝 firebase CLI (第一次安裝就好)

npm install -g firebase-tools

啟動登錄過程 (第一次啟動就好)

firebase login

啟用 webframeworks (第一次啟動就好)

firebase experiments:enable webframeworks

部屬到 firebase 部署到 hosting

firebase deploy

查看已部署的網頁:

library_bar's People

Contributors

smj700f avatar adsfaaron avatar wang890816 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.