Giter Club home page Giter Club logo

vitewebsite2's Introduction

網頁切版直播班 Vite 範例

Node.js 版本

  • 專案的 Node.js 版本需為 v16 以上
  • 查看自己版本指令:node -v

指令列表

  • npm install - 初次下載該範例專案後,需要使用 npm install 來安裝套件
  • npm run dev - 執行開發模式
    • 若沒有自動開啟瀏覽器,可嘗試手動在瀏覽器上輸入 http://localhost:5173/<專案名稱>/pages/index.html
  • npm run build - 執行編譯模式(不會開啟瀏覽器)
  • npm ru deploy - 自動化部署

資料夾結構

  • assets # 靜態資源放置處

    • images # 圖片放置處
    • scss # SCSS 的樣式放置處
  • layout # ejs 模板放置處

  • pages # 頁面放置處

  • JavaScript 程式碼可寫在 main.js 檔案

注意事項

  • 已將 pages 資料夾內的 index.html 預設為首頁,建議不要任意修改 index.html 的檔案名稱
  • .gitignore 檔案是用來忽略掉不該上傳到 GitHub 的檔案(例如 node_modules),請不要移除 .gitignore

開發模式的監聽

vite 專案執行開發模式 npm run dev 後即會自動監聽,不需要使用 Live Sass CompilerWatch SCSS 功能

部署 gh-pages 流程說明

Windows 版本

  1. 在 GitHub 建立一個新的 Repository

  2. 部署前請務必先將原始碼上傳到 GitHub Repository 也就是初始化 GitHub,因此通常第一步驟會在專案終端機輸入以下指令

git init # 若已經初始化過就可以不用輸入
git add .
git commit -m 'first commit'
git branch -M main
git remote add origin [GitHub Repositories Url]
git push -u origin main // 僅限第一次輸入,往後只需要輸入 git push
  1. 初始化完畢後,執行 npm run deploy 指令進行自動化部署

vitewebsite2's People

Contributors

pss940909 avatar

Watchers

 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.