Nuxt 入門

Transcript

1. (╭￣3￣)╭ὑ Nuxt
   入⾨門 ⸜(* ॑꒳ ॑* )⸝ ver 0.10.7
2. ,OPWPVS 転転創意 - 前端⼯工程師 About Me
3. Why Nuxt ?  443
   
   4&0
    ⯏ⴕ侮ざ
   7VF7VFSPVUFS7VFY
   ⿻
   7VFNFUB
    矦⻋
   SPVUF
   鏤㹁
    $PEF
   4QMJU
    -JGF
   JT
   TIPSU
   8FCQBDL
   JT
   IBSE
4. tientien.tw 歊歊詫卓
5. ( ͡ ° ͜ ʖ ͡ °) 相關指令
6. vue init nuxt/starter <project-name> 㸞酤 npm install --save nuxt yarn add nuxt 透過 vue-cli ⾃自主安裝
7. 㛂遤 "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", // ⽣生成靜態⾴頁⾯面 "analyze": "nuxt build --analyze" // ⽣生成 bundle 解析圖 }, "config": { "nuxt": { "host": "0.0.0.0", "port": 9000 } }, package.json
8. Analyze
9. d(`･∀･)b 專案結構
10. 㼠呪穡圓  BTTFUT佞㕬晚$44
    瘞
     DPNQPOFOUT穉⟝
     MBZPVUTSPVUF
    ⴗ䳖儘♶剚隶⹛涸鿈ⴕ
     NJEEMFXBSF
     QBHFT⚺銴갤꬗⟃须俲㣰穡圓莅墂そ⢵⼦ⴕ
    SPVUF
     QMVHJOT佞겙㢫鯺Ⰵ涸
    KT
     TUBUJDSPCPUUYU
    瘞ꬆ䢀暟⟝
     TUPSF7VFY
     OVYUDPOHKT import Header from '~components/Header'
11. <template> <div> <nuxt/> <!--pages 進入點--> </div> </template> Layout EFGBVMUWVF
12. Layout FSSPSWVF <template> <div class="container"> <h1 v-if="error.statusCode === 404">Page not found</h1> <h1 v-else>An error occurred</h1> <nuxt-link to="/">Home page</nuxt-link> </div> </template> <script> export default { props: ['error'], // statusCode & message } </script>
13. Pages pages/ --| _slug/ -----| comments.vue # /:slug/comments -----| index.vue # /:slug --| users/ -----| _id.vue # /users/:id -----| index.vue # /users --| users.vue --| index.vue # / 把它當成 users 額外專屬的 layout，透過 nuxt-child 進入
14. Store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // Do Something }) JOEFYKT 有這個檔案，Nuxt 才會把 Vuex 打包
15. nuxt.config.js 〫⴪䌢欽涸 module.exports = { srcDir: '', // 指定專案下的資料夾為 src（預設為專案⽬目錄） env: {}, // 直接設定 process.env.XXX head: {}, // 預設 meta、link、script 等 css: [], // Global CSS loading: {}, // ⾴頁⾯面切換載入時的 progress bar plugins: [], // 額外載入的 js build: {}, // 額外的 webpack 設定 router: {} // 客制 route, transition: ‘', // 指定⾴頁⾯面切換特效 cache: '', dev: true, generate: {}, }
16. Plugins  佞겙㢫涸
    IFMQFST
     鷴麕
    DPOH
    겙㢫鯺Ⰵ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-1', 'auto'); ga('send', 'pageview'); plugins: [ { src: '~plugins/GA', ssr: false } ] plugins/GA.js nuxt.config.js
17. (´・ω・`) API 結構
18. "1*
    穡圓 export default { asyncData (context) { return {}; // 內容將會被併入 data }, fetch (context) { return Promise; // ⾴頁⾯面切換 / SSR 前會呼叫 }, head () { // vue-meta }, layout: 'default', middleware: '', scrollToTop: true, transition: '', // ⾴頁⾯面切換特效 validate (context) { // 判斷⾴頁⾯面是否正確 } }
19. DPOUFYU  JT$MJFOUJT4FSWFSJT%FW
     SPVUFWVFSPVUFS
     TUPSF7VFY
     FOW
     QBSBNTRVFSZ
     SFRSFT
     SFEJSFDU
     FSSPSTIPX
    MBZPVUFSSPSWVF
20. ( ×ω× ) 幾個⼩小坑
21. Vue-meta /VYU
    
    涸
    7VFNFUB
    晝劥捀
    剤㓂ꅾ
    CVH
    @@EBOHFSPVTMZ%JTBCMF4BOJUJ[FST
    DBVTJOH
    FSSPST ZBSO
    酤倞晝
    7VFNFUB
    䖕剚䪾莍涸佞♧⟨㖈
    OPEF@NPEVMFTOVYU
    酭鎹䖤ⵅ䱈
    欽
    OQN
    ⵱剚湬䱺《➿
22. ⾃自定義 route router: { extendRoutes (routes) { routes.push({ name: 'register', path: '/register', component: path.resolve(__dirname, 'src/pages/user-entry') }, { name: 'login', path: '/login', component: path.resolve(__dirname, 'src/pages/user-entry') }) } } nuxt.config.js
23. _(┐「ε:)_ 相關資源
24. 0DJBM
    4JUF 湱ꡠ须彂 /VYU
    &YBNQMFT
    /VYU
    $PNNVOJUZ
    /VYU
    $PNNVOJUZNPEVMFT
25. 謝謝