1. nuxt 是一個 vue 用來做 SSR 的框架

   • SSR：每個頁面回傳不同html檔案，對SEO好，但Loading大
   • SPA：用JS把畫面渲染出來，不會載入新的html檔案，對SEO不好，先慢後快

2. 官網：https://nuxtjs.org/

3. 用 npx or npm or yarn 建立專案

   npx create-nuxt-app <project-name>
   npm init nuxt-app <project-name>
   yarn create nuxt-app <project-name>
   

4. 建立後，開啟專案

   cd <project-name>
   npm run dev
   

5. 專案目錄

   • page：頁面，自動路由 —> http://url/page
   • layout：佈局，定義default.vue
   • assets：靜態元件，會被nuxt處理，ex：壓縮檔案、CSS檔案
   • static：靜態元件，不會被nuxt處理，ex：影片檔案、PDF檔案
   • middleware：中間層，從路由到頁面，可以做共同驗證
   • plugins：全局套件
   • store：vuex
   • components：小組件，可以直接使用

6. 安裝 scss

   npm install --save-dev sass sass-loader fibers
   yarn create --save-dev sass sass-loader fibers
   

7. AsyncData

   • asyncData是在Server端處理非同步的生命週期，只會執行一次，用來攔截API，內容會覆蓋data中的東西

   • asyncData只有在page中能用，其他目錄沒有這個生命週期

   • 搭配async、awiat

     import axios from 'axios'
     export default {
     	async asyncData () {
     		const response = await axios.get('<http://123/api>')
     		retrun { response: response.data.data }
     	}
     }
     

8. Fetch

   • fetch可以在任何目錄執行
   • fetch在vue實體後產生，可以使用this，就是在asyncData之後產生
   • fetch不能直接return，只能用this.data覆蓋
   • fetchOnServer：false，會變成前端執行
   • $fetchState.pending可以取得fetch是否執行完畢
   • $fetchState.error可以取得fetch是否行出錯的訊息
   • $fetchState.timestamp可搭配keep-alive使用於activated生命週期中使用，進行緩存

9. nuxt.config.js

   • nuxt.config.js是全域設定
   • title、meta、link、script可以放在個頁面執行

10. Nuxt使用Router

    • <nuxt-link to="/"><nuxt-link>

    • 巢狀路由 —> 在pages底下建立vue擋就可以

    • 嵌套網址會使用<NuxtChild />來切換頁面內容

    • 動態路由需要加入_id.vue

      import axios from 'axios'
      export default {
      	async asyncData (context) {
      		const response = await axios.get('<http://123/api>' + context.params.id)
      		return { response: response.data }
      	}
      }
      

    • method中使用router，需要寫成this.$router

      methods:{
      	next (id) {
      		this.$router.push('/about/' + id)
      	}
      }
      

11. 錯誤頁面

    • layout底下建立，error.vue檔案

12. vuex

    • 建立store/index.js檔案

      export const state = () => ({
        number: 0
      })
      
      export const actions =  {
        handleAddNumber({ commit }) {
          commit("addNumber");
        }
      }
      
      export const mutations = {
        addNumber(state) {
          state.number++
        }
      }
      
      export const getters =  {
        getNumber: state => {
          return `number: ${state.number}`
        }
      }
      

    • 加入methods，觸發vuex actions中的方法

      methods: {
      	handNumber () {
      		this.$store.dispath('handleAddNumber')
      	}
      }
      

    • 加入computed，觸發vuex getters中的值

      computed: {
      	getNumber () {
      		return this.$store.getters.getNumber
      	}
      }
      

    • template中可以直接顯示{{ getNumber }}

    • 可以從後端取得state的值

安裝 tailwind

npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

• nuxt.config.js

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

• npx tailwindcss init

• tailwind.config.js

  // tailwind.config.js
  module.exports = {
    purge: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      fontFamily: {
        sans: ['Noto Sans TC', '微軟正黑體', 'sans-serif'],
        work: ['Work Sans', 'sans-serif'],
      },
      boxShadow: {
        // ....沒法用擴充方式新增如果要沿用得先載入
        customer: '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
      },
      screens: {
        sm: '640px',
        md: '992px',
        lg: '1200px',
        xl: '1460px',
      },
      spacing: {
        // ....沒法用擴充方式新增如果要沿用得先載入
        '40p': '40%',
        '75p': '75%',
        '100p': '100%',
        '120p': '120%',
        '136p': '136%',
      },
      extend: {
        // ....擴充
        margin: {
          30: '120px',
        },
        spacing: {
          'pb-40p': '40%',
        },
        colors: {
          customer: {
            primary: '#6A483E',
            secondary: '#EC964B',
            'light-primary': '#B28F85',
            gray: '#F2F2F2',
            black: '#433D3B',
          },
        },
        backgroundImage: (theme) => ({
          'index-partner': "url('/image/index/3-01.jpg')",
          'index-investor-1': "url('/image/index/4-01.jpg')",
          'index-investor-2': "url('/image/index/4-02.jpg')",
          'index-investor-3': "url('/image/index/4-03.jpg')",
        }),
        height: {
          '600px': '600px',
          '400px': '400px',
          'full-72px': 'calc(100% - 72px)',
        },
        lineHeight: {
          0: '0',
        },
        fontSize: {
          'pc-h1': ['45px', '76.5px'],
          'pc-h2': ['30px', '51px'],
          'pc-h3': ['28px', '47px'],
          'pc-h4': ['20px', '34px'],
          'pc-h5': ['14px', '24px'],
          'pc-h6': ['12px', '20px'],
          'pc-p': ['18px', '30px'],
          'mb-h1': ['32px', '54px'],
          'mb-h2': ['28px', '47px'],
          'mb-h3': ['22px', '37px'],
          'mb-h4': ['18px', '30px'],
          'mb-h5': ['12px', '20px'],
          'mb-h6': ['12px', '20px'],
          'mb-p': ['16px', '27px'],
        },
        zIndex: {
          '-1': '-1',
        },
        width: {
          40: '160px',
          50: '200px',
          '3col': 'calc((100% - 80px)/3)',
          '2col': 'calc((100% - 40px)/2)',
        },
      },
    },
    variants: {
      // 互動效果
      extend: {
        opacity: ['disabled'],
        pointerEvents: ['disabled'],
        backgroundColor: ['active', 'disabled'],
        padding: ['responsive', 'last', 'first'],
        margin: ['responsive', 'last', 'first'],
        maxHeight: ['focus'],
        divideColor: ['group-hover'],
        textColor: ['group-hover'],
      },
    },
    plugins: [],
  }
  

  • 在 scss 主檔案中 style.scss 引入

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";
    

注意事項

• 在 created() 裡面不能使用 alert()、window()