nuxt的配置


nuxt項目配置

 

 

1.在nuxt.config.js文件中配置

  

1.1.build的配置

// 通過執行命令nuxt build --analyze來啟用查看編譯構建結果

build: {
     analyze: true
},



// 為 JS 和 Vue 文件設定自定義的 babel 配置。

babel: {
      babelrc: false,
      cacheDirectory: undefined,
      presets: ['@nuxt/babel-preset-app']
},

 

1.2.css的配置

// nuxt在這里配置全局的css樣式,配置的樣式文件默認的會在所有的頁面引入。

1.先安裝    npm install --save-dev node-sass sass-loader


2.在nuxt.config.js文件中配置全局樣式文件

css: [
     // 項目里要用的 CSS 文件
     '~assets/css/main.css',

     // 項目里要使用的 less 文件
     '~~assets/css/main.scss'
],

 

1.3.head的配置

 

// 可以在head標簽里面配置一些自定義的meta標簽,和style樣式文件
head: {
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' }
        ],
        link: [
          { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
        ]
}

 

1.4.loading配置

// 可以使用nuxt內置的加載進度條,也可以自定義樣式。

// 在組件中可以使用this.$nuxt.$loading.start()來開啟進度條,通過this.$nuxt.$loading.finish()來關閉進度條,
// 為了確保進度條運行沒有問題,一個把它放在this.$nextTick(() => {}中執行
mounted () { this.$nextTick(() => { this.$nuxt.$loading.start() setTimeout(() => this.$nuxt.$loading.finish(), 500) }) } // 頁面切換的時候如果不想要進度條的話在nuxt.config.js中配置 module.exports = { loading: false }

 

 

進度條樣式的配置

 

 

自定義加載組件我們可以在components目錄下創建自己定義的進度條組件

 

 

 

 

 

// 在nuxt.config.js中配置路徑
module.exports = {
  loading: '~/components/loading.vue'
}

 

進度條時長問題

// 進度條進度的時間無法確定設置 duration 來部分解決這個問題,您可以預估需要多長時間完成。

// 您可以通過將continuous設置為true來更改默認行為,然后在達到100%后,進度條將在duration時間內再次收縮回0%。

// 當達到0%后仍未完成加載時,它將再次從0%開始增長到100%,這將重復直到加載完成。

 

 

1.5.plugins屬性的配置

 

// 屬性值可是數組可以使對象,是數組的話里面就是字符串形式的文件路徑

    plugins: ['~/plugins/vue-inject.js'] plugins目錄下的js文件


// 對象形式的plugins

plugins: [
        {
            src: '~/plugins/vue-inject.js',    // 是文件的路徑

            mode: 'client'     // 表示只能在客戶端使用,值為server表示服務端使用
        }
],


// 文件中可以定義在所有的頁面和asyncData函數中和store中可以訪問的一段功能函數,可以是一段屬性


// 列如vue-inject.js文件中

import Vue from 'vue'

// 需要自定義一段方法或者屬性,只能給所有的組件和頁面使用

Vue.prototype.$toast = string => alert('您輸入的名字是' + string)



// 這樣的方法可以在頁面和store(vuex)和asyncData中都可以使用

export default ({ app }, inject) => {
    inject('getData', string => alert('獲取的數據是' + string))
}



// 在組件和頁面中使用

this.$toast('小美')
this.$getData('明天吃飯')

 

 

 1.7.router的配置和transition動畫的配置

// routeNameSplitter可以更改路由的路徑格式

router: {
    routeNameSplitter: '/'
}


// linkActiveClass 全局通過路由默認激活的類

router: {
    linkActiveClass: 'active-link'
}


// linkExactActiveClass:路由默認精確的活動類

router: {
    linkExactActiveClass: 'exact-active-link'
}


// linkPrefetchedClass:路由默認的預取類,默認是禁用
router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
}


// transition動畫的配置

// 可以在全局css中定義動畫的樣式

// 默認沒有指定name名字的
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
} 


// 指定了name屬性的動畫
.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}


// 在切換頁面需要動畫的頁面中指定

transition: 'test'


// 當動畫為函數的話,可以判斷路由從哪里來的從而加上動畫
transition (to, from) {
     return to.query.page = 'test'
},


// 在nuxt.config.js文件中配置可以在所有的頁面切換使用
transition: {
    name: 'test',
    mode: 'out-in'      // 指定動畫的方式  
}    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM