Nuxt.js 入門
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/
在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/
可以用來設定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/
$ npm install --save-dev sass sass-loader@10 在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/
分享至
成為作者繼續創作的動力吧！
