溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

nuxt.js筆記

發(fā)布時間：2020-07-31 17:09:09 來源：網(wǎng)絡(luò) 閱讀：2970 作者：xxxpjgl 欄目：web開發(fā)

起步：
1、全局安裝vue-cli：npm install vue-cli -g
2、初始化nuxt：vue init nuxt/starter（先進入項目目錄文件夾）
3、安裝依賴：npm install
4、開發(fā)環(huán)境啟動項目：npm run dev
5、開發(fā)完成后打包代碼：npm run build
6、啟動服務(wù)：npm start
一、Nuxt常用配置項
1、配置IP和端口：
開發(fā)中經(jīng)常會遇到端口被占用或者指定IP的情況。我們需要在根目錄下的package.json里對config項進行配置。比如現(xiàn)在我們想把IP配置成127.0.0.1，端口設(shè)置1818

//package.json
  "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

配置好后，我們在終端中輸入npm run dev，然后你會看到服務(wù)地址改為了127.0.0.1:1818.
2、配置全局CSS
在nuxt.config.js里進行操作：

//assets/css/normailze.css
html{
    color:red;
}
//nuxt.config.js
css:['~assets/css/normailze.css'],

PS：~表示nuxt項目根目錄

二、Nuxt的路由配置和參數(shù)傳遞
基本路由：
Nuxt根據(jù)文件目錄結(jié)構(gòu)，自動給我們配置好了路由
所以我們?nèi)绻枰M行頁面跳轉(zhuǎn)，直接在pages目錄下，新建對應(yīng)的頁面文件夾，比如about文件夾，然后在下面建立index.vue文件，這樣訪問 http://localhost:3000/about，
就可以訪問到下面的頁面了，比如：<nuxt-link to='/about'></<nuxt-link>
路由跳轉(zhuǎn)不要使用a標簽，因為這樣會有頁面的刷新跳轉(zhuǎn)
使用<nuxt-link></<nuxt-link>標簽

//index.vue
<template>
  <div>
      <h3>About Index page</h3>
      <ul>
            <li><nuxt-link to="/about">HOME</nuxt-link></li>
        <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
          <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
          <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
      </ul>
  </div>
</template>
//news/index.vue
<template>
  <div>
      <h3>News</h3>
       <ul>
        <li>userId:{{$route.params.newsId}}</li>
         <li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
      </ul>
  </div>
</template>

三、Nuxt的動態(tài)路由和參數(shù)校驗
動態(tài)路由：即帶參數(shù)的路由，模板結(jié)構(gòu)都是一樣的，根據(jù)參數(shù)的不同，顯示不同的內(nèi)容
動態(tài)路由命名都以 _xx 為前綴，比如_id.vue，接收使用：$route.params.id來接收參數(shù)。
這里的id和動態(tài)路由的名稱一樣

動態(tài)參數(shù)校驗：
進入一個頁面，對參數(shù)傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate( )。

//pages/news/_id.vue
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

我們使用了validate方法，并把params傳遞進去，然后用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面( nuxt已經(jīng)幫我們默認建立好了 )。

四、Nuxt的路由動畫效果
樣式寫在全局樣式：normailze.css里面
1、全局路由動畫
.page-enter-active,.page-leave-active{ transition:opacity 2s }
.page-enter,.page-leave-active{ opacity:0 }
2、單頁路由動畫
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;

}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
然后在about/index.vue組件中設(shè)置

export default {
transition:'test'
}
這時候在進入about頁面就有了頁面的切換獨特動效了。

五、Nuxt的默認模版和默認布局
目的：復(fù)用公共元素，比如網(wǎng)頁標題等等

1、默認模板，可以定義包括head在內(nèi)的一些公用的元素，命名為：app.html，一個完整的html文件
在根目錄下創(chuàng)建一個app.html就可以實現(xiàn)默認模板的創(chuàng)建

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>每個頁面都會顯示這個內(nèi)容，而且是在pages每個組件內(nèi)容的上面顯示</p>
    {{ APP }}
</body>
</html>

這里的{{ HEAD }}讀取的是nuxt.config.js里的head信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面了，比如about、news等等。需要注意的是HEAD和APP都需要大寫，如果小寫會報錯的。
修改刪除app.html文件都需要重啟服務(wù)

2、默認布局，這里是default.vue，一個vue組件，只可定制template里面的內(nèi)容
默認布局主要針對于頁面的統(tǒng)一布局使用。它在位置根目錄下的layouts/default.vue。需要注意的是在默認布局里不要加入頭部信息，只是關(guān)于<template>標簽下的內(nèi)容統(tǒng)一訂制。

<template>
  <div>
    <p>JSPang.com  技術(shù)胖的博客</p>
    <nuxt/>
  </div>
</template>

這里的<nuxt/>就相當(dāng)于我們每個頁面的內(nèi)容，你也可以把一些通用樣式放入這個默認布局里，但是個人不建議這樣寫，會增加頁面的復(fù)雜程度。
修改后不需要重啟服務(wù)
總結(jié)：要區(qū)分默認模版和默認布局的區(qū)別，模版可以定制很多頭部信息，包括IE版本的判斷；布局只能定制<template>里的內(nèi)容，跟布局有關(guān)系。在工作中修改時要看情況來編寫代碼。
注意：工作中一般都是定義默認布局

六、Nuxt的錯誤頁面和個性meta設(shè)置
當(dāng)用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在應(yīng)用程序開發(fā)中404頁面是必不可少的。Nuxt.js支持直接在默認布局文件夾里建立錯誤頁面。
1、建立錯誤頁面
在根目錄下的layouts文件夾下建立一個error.vue文件，它相當(dāng)于一個顯示應(yīng)用錯誤的組件

<template>
  <div>
      <h3 v-if="error.statusCode==404">404頁面不存在</h3>
      <h3 v-else>500服務(wù)器錯誤</h3>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['error'],
}
</script>

代碼用v-if進行判斷錯誤類型，需要注意的是這個錯誤是你需要在<script>里進行聲明的，如果不聲明程序是找不到error.statusCode的。
注：這里的error和statusCode都是nuxt定義好的

2、個性meta設(shè)置
頁面的Meta對于SEO的設(shè)置非常重要，每個頁面都應(yīng)該有屬于自己內(nèi)容的title和meta設(shè)置。直接使用head方法來設(shè)置當(dāng)前頁面的頭部信息就可以了。
我們先把pages/news/index.vue頁面的鏈接進行修改一下，傳入一個title，目的是為了在新聞具體頁面進行接收title，形成文章的標題。

//pages/news/index.vue
<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'jspang.com'}}">News-1</nuxt-link></li>
///pages/news/_id.vue
<template>
  <div>
      <h3>News-Content [{{$route.params.id}}]</h3>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>
<script>
export default {

  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//獨立設(shè)置news內(nèi)容頁的head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}

</script>

注意：為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產(chǎn)生重復(fù)的現(xiàn)象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。

七、asyncData異步方法獲取數(shù)據(jù)
在項目中需要在初始化頁面前先得到數(shù)據(jù)，也就是我們常說的異步請求數(shù)據(jù)

1、普通vue方式異步獲取遠程數(shù)據(jù)

<template>
    <div class="">
        <ul>
            <li>姓名：{{info.name}}</li>
            <li>年齡：{{info.age}}</li>
            <li>興趣：{{info.interest}}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default{
    name:'asyncData',
    data(){
        return {
            name:'hello world',
            info:{}
        }
    },
    created(){
        return axios.get('https://api.myjson.com/bins/1hjiso')
        .then((data)=>{
            console.log(data.data)
            this.info = data.data
        })

    }
}
</script>

2、使用nuxt封裝的anyncData方法，直接在data下面書寫anyncData方法，不用寫在methods里面

<template>
    <div class="">
        <ul>
            <li>姓名：{{info.name}}</li>
            <li>年齡：{{info.age}}</li>
            <li>興趣：{{info.interest}}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default{
    name:'asyncData',
    data(){
        return {
            name:'hello world',
            info:{}
        }
    },
    asyncData(){
        return axios.get('https://api.myjson.com/bins/8gdmr')
        .then((res)=>{
            console.log(res)
            return {info:res.data}
        })
    }
}
</script>

八、靜態(tài)資源和打包
1、圖片、樣式路徑均使用~，這種引用方法是不用估計相對路徑的，“~”就相當(dāng)于定位到了項目根目錄
2、打包靜態(tài)HTML并運行
npm run generate，生成dist文件夾，在dist文件夾下使用命令：live-server即可查看打包后的效果

九、博文搬錄：
1、快速模板
在已經(jīng)安裝了 vue-cli 的前提下，可以快速創(chuàng)建一個 nuxt 的項目模板
vue init nuxt-community/starter-template MyProject
// 其中 MyProject 是項目文件夾名稱，可自定義
通過 npm install（似乎用 yarn install 更順利）安裝依賴之后，可以直接 npm run dev 在開發(fā)環(huán)境啟動項目
默認啟動的地址為 http://localhost:3000/，可以在 package.json 中添加以下配置來修改主機端口號

 "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "7788"
    }
  },

開發(fā)完成后執(zhí)行 npm run build 打包代碼，最后 npm start 啟動服務(wù)
2、重要目錄
生成的項目目錄如下
nuxt.js筆記
大部分文件夾名稱都是 nuxt 默認保留的，不可修改
其中比較關(guān)鍵的目錄有三個：

components 組件目錄：
nuxt.js筆記
一般用來存放非頁面級別的組件，如 header、footer 等公共組件
該目錄下的組件具有常規(guī) vue 組件的方法和特性，不會被 nuxt.js 擴展特性

layouts 布局目錄
nuxt.js筆記
可以修改該目錄下的 default.vue 來修改默認布局

<template>
  <div>
    <my-header></my-header>
    <nuxt/>
    <my-footer></my-footer>
  </div>
</template>

其中 <nuxt/> 是必需的，頁面的主體內(nèi)容會顯示在這里（類似于根節(jié)點的 <router-view/>）
此外還可以在目錄下新增 error.vue 作為錯誤頁面，具體的寫法可以參考官方文檔

3、pages 頁面目錄
nuxt.js筆記
用于存放頁面級別的組件，nuxt 會根據(jù)該目錄下的頁面結(jié)構(gòu)生成路由
比如上圖中的頁面結(jié)構(gòu)，會生成這樣的路由配置：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'about',
      path: '/about',
      component: 'pages/about.vue'
    },
    {
      name: 'cla***oom',
      path: '/cla***oom',
      component: 'pages/cla***oom.vue',
      children: [
        {
          path: 'student',
          component: 'pages/cla***oom/student.vue',
          name: 'student'
        },
        { //定義帶參數(shù)的動態(tài)路由，需要創(chuàng)建對應(yīng)的以下劃線作為前綴的 Vue 文件或目錄
          path: ':id',
          component: 'pages/cla***oom/_id.vue',
          name: 'cla***oom-id'
        }
      ]
    }
  ]
}

此外，該目錄下的 vue 組件還具備一些 Nuxt.js 提供的特殊功能特性
其中 asyncData 方法比較常用，支持異步數(shù)據(jù)處理
這個方法會在頁面組件每次加載之前被調(diào)用，然后獲取數(shù)據(jù)并返回給當(dāng)前組件

asyncData ({ params, error }) {
    return axios.get(`api/posts/${params.id}`)
    .then((res) => {
      return { name: res.data.name}
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'not found' })
    })
  }

asyncData 方法的第一個參數(shù)為上下文對象 context，具體屬性可以查看這里
由于asyncData方法是在組件初始化前被調(diào)用的，所以在方法內(nèi)是沒有辦法通過 this 來引用組件的實例對象
4、使用插件
如果項目中還需要引入其他的第三方插件，可以直接在頁面中引入，這樣在打包的時候，會將插件打包到頁面對應(yīng)的 js 里面
但要是別的頁面也引入了同樣的插件，就會重復(fù)打包。如果沒有需要分頁打包的需求，這時候可以配置 plugins
以 element-ui 為例，在安裝了 element-ui 之后，在 plugins 目錄下創(chuàng)建 elementUI.js
nuxt.js筆記
然后在根目錄的 nuxt.config.js 中添加配置項 build.vendor 和 plugins

build: {
    vendor: ['~/plugins/elementUI.js']
  },
  plugins: [
    {src: '~/plugins/elementUI.js'},
  ]

這里的 plugins 屬性用來配置 vue.js 插件，也就是可以用 Vue.user() 方法的插件
默認只需要 src 屬性，另外還可以配置 ***: false，讓該文件只在客戶端被打包引入
如果是像 axios 這種第三方（不能 use）插件，只需要在 plugins 目錄下創(chuàng)建 axios.js

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
  baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

然后在 build.vendor 中添加配置（不需要配置 plugins）

build: {
  vendor: ['~/plugins/axios.js']
}

這樣在打包的時候，就會把 axios 打包到 vendor.js 中
5、Vuex 狀態(tài)樹
如果在 store 目錄下創(chuàng)建了 index.js，nuxt.js 會根據(jù)該目錄下的文件創(chuàng)建 Vuex 狀態(tài)樹

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state: {
    author: 'WiseWrong',
    info: ''
  },
  mutations: {
    setInfo (state, val) {
      state.info = val
    }
  },
  actions: {
    loadAboutMeInfo ({commit, state}) {
      return Axios.get(`/about`)
        .then(res => {
          console.log('ajax is success')
          console.log(res.data.info)
          commit('setInfo', res.data.info)
        })
        .catch(err => {
          console.log('error')
        })
    }
  }
})

export default store

// Nuxt.js 內(nèi)置引用了 vuex 模塊，不需要額外安裝
上面的代碼中，我在 actions 中寫了一個 loadAboutMeInfo() 方法，用來請求 /api/about 接口
然后在 about.vue 頁面中調(diào)用

// about.vue 

<template>
  <section class="container">
    <div>
      <img src="~/assets/about.png" alt="">
    </div>
    <h2>{{$store.state.info}}</h2>
  </section>
</template>

<script>
export default {
  fetch({ store }) {
    return store.dispatch('loadAboutMeInfo')
  },
  name: 'about',
  data () {
    return {}
  }
}
</script>

成果演示：
nuxt.js筆記

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手