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' // 指定動畫的方式 }