Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。 通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織， Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。

SSR ，即服務(wù)器渲染，就是在服務(wù)器端將對Vue頁面進(jìn)行渲染生成html文件，將html頁面?zhèn)鬟f給瀏覽器。

Nuxt.js是特點(diǎn)（優(yōu)點(diǎn)）：

• 基于 Vue.js
• 自動代碼分層
• 服務(wù)端渲染
• 強(qiáng)大的路由功能，支持異步數(shù)據(jù)
• 靜態(tài)文件服務(wù)
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標(biāo)簽管理
• 本地開發(fā)支持熱加載
• 集成ESLint
• 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等
  

vue-cli3如何安裝？

yarn global add @vue/cli-init
npm init nuxt-app my-project // 初始化一個nuxt項(xiàng)目

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

全局配置

配置全局樣式nuxt.config.js

module.exports={
  css: ['@/assets/css/normailize.css'] // @別名，根目錄 
}

配置全局標(biāo)題和meta

在nuxt.config.js

head: {
  title: 'nuxt項(xiàng)目實(shí)戰(zhàn)',
  meta: [
   {charset: 'utf-8'},
   {name: 'viewport', content: 'width=device-width, initial-scale=1'},
   {hid: 'description', name: 'description', content: pkg.description}
  ],
  link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}]
 },

配置全局動效

Nuxt.js 默認(rèn)使用的過渡效果名稱為 page 在全局樣式文件 assets/css/main.css 這里假設(shè)是main.css里添加一下樣式：

.page-enter-active,      //頁面進(jìn)入激活的效果和頁面離開的動效
.page-leave-active {
 transition: opacity 1s;
}
.page-enter,         // 頁面進(jìn)入和頁面離開激活的效果
.page-leave-active {
 opacity: 0;
}

配置頁面單獨(dú)的動畫效果

在全局樣式文件 assets/css/main.css 這里假設(shè)是main.css里添加一下樣式： .后面加頁面的單獨(dú)屬性，如test

.test-enter-active,
.test-leave-active {
 transition: all 1s;
 font-size: 12px;
}
.test-enter,
.test-leave-active {
 opacity: 0;
 font-size: 40px;
}

然后我們將頁面組件中的 transition 屬性的值設(shè)置為 test 即可：

export default {
 transition: 'test'
}

配置全局loading

module.exports = {
  loading: {color: '#fff'},
}

路由

要在頁面之間使用路由，我們建議使用 標(biāo)簽。nuxt會自動在.nuxt生成router.js,用這個標(biāo)簽跟vue-router的使用基本一致。不需要額外引入vue-router,且根據(jù)我們的目錄名稱來處理的，不需要我們在router.js配置

基礎(chǔ)路由

<nuxt-link :to="{name:'index'}">Home</nuxt-link> //可以根據(jù)to，path跳轉(zhuǎn)，同樣可以傳參params,query
 <nuxt-link :to="{name:'about',query:{id:123}}">about</nuxt-link>

動態(tài)路由

在 Nuxt.js 里面定義帶參數(shù)的動態(tài)路由，需要創(chuàng)建對應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄。

pages/
--| news/
-----| _id.vue
-----| index.vue
在index.vue中要根據(jù)不同的id跳到新聞詳情頁，這里有2種跳轉(zhuǎn)方式，通過path和name
<nuxt-link :to="{path:'/news/123'}">news-1</nuxt-link>
<nuxt-link :to="{name:'news-id',params:{newdetail:'fff'}}">news-32</nuxt-link>
在_id.vue中可以接收到參數(shù){{$route.params.newdetail}}

路由參數(shù)效驗(yàn)

export default {
 validate ({ params，query}){
  // 必須是number類型
  return /^\d+$/.test(params.id)
 }
}

嵌套路由

創(chuàng)建內(nèi)嵌子路由，你需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。

在父組件(.vue文件) 內(nèi)增加 用于顯示子視圖內(nèi)容

動態(tài)嵌套路由，不多見，原理一致

中間件

中間件允許您定義一個自定義函數(shù)運(yùn)行在一個頁面或一組頁面渲染之前。每一個中間件應(yīng)放置在 middleware/ 目錄。文件名的名稱將成為中間件名稱(middleware/auth.js將成為 auth 中間件)。在 nuxt.config.js 、 layouts 或者 pages 中使用中間件: eg:在nuxt.config.js

module.exports = {
  router:{
  middleware: 'check-auth'
 }
}

總結(jié)

以上所述是小編給大家介紹的nuxt.js基于ssh的vue通用框架,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論