Nuxt.js 入門
閱讀時間約 2 分鐘
1. 安裝node.js
2. 建立專案:
$ npx create-nuxt-app {project_name}接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
$npm run dev
打開http://localhost:3000/ 即可看到畫面。
pages
- Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的about.vue，瀏覽about頁面:
components
在about頁面中引用Test123元件:
static
存放靜態資源，像是favicon.ico, robots.txt等。
nuxt.config.js
可以用來設定global head 與 global css，每頁共同的部分很好用。
在Nuxt中使用SCSS
1. 安裝sass-loader
$ npm install --save-dev sass sass-loader@10
2. 詳細用法參考我這篇: SCSS入門 - 在Vue中使用SCSS
Global CSS
在nuxt.config.js中的css區塊，設定global css位置:
css: ['@/assets/scss/main.scss'],
頁面展示:
本筆記參考:
1. https://juejin.cn/post/7025184286873485319
2. https://www.nuxtjs.cn/guide/installation
3. https://juejin.cn/post/6991299475499122702
4. https://medium.com/web-design-zone/%E5%BB%BA%E7%AB%8Bnuxt-js%E5%B0%88%E6%A1%88%E5%88%9D%E9%AB%94%E9%A9%97-21920735e38b
5. https://nuxtjs.org/docs/configuration-glossary/configuration-css/
1. https://juejin.cn/post/7025184286873485319
2. https://www.nuxtjs.cn/guide/installation
3. https://juejin.cn/post/6991299475499122702
4. https://medium.com/web-design-zone/%E5%BB%BA%E7%AB%8Bnuxt-js%E5%B0%88%E6%A1%88%E5%88%9D%E9%AB%94%E9%A9%97-21920735e38b
5. https://nuxtjs.org/docs/configuration-glossary/configuration-css/
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
哈囉，大家好！我們將探討 Nuxt 開發環境的建立與應用介面規劃，通過使用 Nuxt 的約定式結構和全域佈局，我們更高效地管理前端界面，並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
哈囉，大家好！我們將探討 Nuxt 開發環境的建立與應用介面規劃，通過使用 Nuxt 的約定式結構和全域佈局，我們更高效地管理前端界面，並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil