Nuxt 開發(fā)經(jīng)驗分享

Nuxt 介紹

簡單來說隘谣，Nuxt.js 是一個基于Vue的通用應(yīng)用框架淋纲，采用SSR(Server Side Rendering 服務(wù)端渲染);目的是為了解決單頁面應(yīng)用的 SEO 問題；vue單頁面應(yīng)用渲染是從服務(wù)器獲取所需js掘鄙，在客戶端將其解析生成HTML掛載于id為app的DOM元素上耘戚，這樣會存在兩個大問題：

1.由于頁面內(nèi)容是通過js插入，對于內(nèi)容性網(wǎng)站來說操漠，搜索引擎無法抓取網(wǎng)站內(nèi)容收津，也就是用戶搜不到此網(wǎng)站的相關(guān)信息，不利于SEO浊伙；
2.資源請求量大撞秋，造成網(wǎng)站首屏加載緩慢，不利于用戶體驗

而我們公司做的網(wǎng)站剛好是內(nèi)容性質(zhì)的網(wǎng)站愛德媒BlockADM~~~

Nuxt 安裝

Nuxt.js 團隊創(chuàng)建了腳手架工具 create-nuxt-app

 $ npx create-nuxt-app <項目名>

前提是已經(jīng)安裝了vue腳手架搭建項目的環(huán)境嚣鄙，比如npm吻贿； npx在NPM版本5.2.0就已經(jīng)默認(rèn)安裝了；在安裝的過程中哑子，它會讓你進行一些選擇舅列，在集成的服務(wù)端框架之間進行選擇，我的項目是選擇None（Nuxt默認(rèn)服務(wù)器）卧蜓；選擇喜歡的ui框架根據(jù)實際項目選擇帐要；之后的我基本都是選擇默認(rèn)的了；安裝完成之后進入項目 npm run dev 啟動項目

   $ cd <project-name>

   $ npm run dev

Nuxt 項目目錄結(jié)構(gòu)

[圖片上傳失敗...(image-7711c-1565578464914)]

實戰(zhàn)經(jīng)驗

路由

nuxt按照 pages 文件夾的目錄結(jié)構(gòu)自動生成路由（vue需在 src/router/index.js 手動配置路由）

  pages/
  --| user/
 -----| index.vue
 -----| one.vue
  --| index.vue

Nuxt.js 生成對應(yīng)的路由配置表為：

   router: {
     routes: [
      {
       name: 'index',
       path: '/',
       component: 'pages/index.vue'
     },
     {
       name: 'user',
       path: '/user',
       component: 'pages/user/index.vue'
    },
    {
       name: 'user-one',
       path: '/user/one',
       component: 'pages/user/one.vue'
     }
   ]
  }
`

引入本地css文件以及js插件

 `
 export default {
   mode: 'universal',
   head: {
    title: '愛德媒BlockADM-價值共享網(wǎng)絡(luò)' || '',
     meta: [
      { charset: 'utf-8' },
       ],
     link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo_icon.png' }
     ]

    loading: { color: '#fff' },
  /* ** 全局樣式引入 */
    css: [
      'element-ui/lib/theme-chalk/index.css',
      '~static/css/common.css',
     ],
  /*** 全局js */
    plugins: [

     { src: '~/plugins/main_client.js', mode: 'client' },
     { src: '~/plugins/main.js', mode: 'server' },
     '~/plugins/axios'
    ],
   }

 `

項目的全局css是放在static/css/common.css中弥奸，項目中用的js全局js榨惠，分為兩個文件，一個是在服務(wù)端渲染的，一個是在客戶端渲染的冒冬，mode分別都不一樣伸蚯，這里是我踩過的坑，不過前端大部分的js都是在客戶端简烤；第二點 axios.js是自己封裝了原本axios的文件，可以把它當(dāng)作全局的js文件摇幻，所以把它擋在plugins中横侦，然后再配置文件中引入

請求

Nuxt.js擴展了Vue.js,增加了一個叫 asycData 的方法，使得我們可以再設(shè)置組件的數(shù)據(jù)之前能異步獲取或者處理數(shù)據(jù)绰姻，使用方法：

 ** 單個請求**

  ` 

   async asyncData (context) {
    let {data} = await context.$axios.get(`news/app/visitor/newsFlash/get`,{params: {id:context.query.id}});
    return {
      content:data.data.content,
      newsFlashTime:data.data.createTime,
      newsFlashTitle:data.data.title,
    }
  },
 
 `

其中content枉侧，newsFlashTime等是自己定義的data中的數(shù)據(jù)

**并發(fā)請求**

 `
  async asyncData (context) {
    console.log(context);
    let [data,dataTwo,dataThree] = await Promise.all([
      context.$axios.get("user/app/visitor/getMemberInfoByUserId",{params: {userId:context.query.id}}),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 3,
        sortType: 2
      }),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 6,
        memberId: context.query.id
      })
    ]);

    return {
      personDate:data.data.data,
      allViewDate:dataTwo.data.data.records,
      articleDate:dataThree.data.data.records
    }
  },
       
 `

重點：context 來了解該對象的所有屬性和方法。

先整理到這里吧目前所遇到的問題是這些~~~

最后編輯于：2019.08.12 10:55:40

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者