快捷導(dǎo)航

深入淺析nuxt.js基于ssh的vue通用框架

更新時(shí)間：2019年05月21日 09:49:25 作者：青呢喃

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

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

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

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

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

vue-cli3如何安裝？

yarn global add @vue/cli-init
npm init nuxt-app my-project // 初始化一個(gè)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'}]
 },

配置全局動(dòng)效

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

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

配置頁(yè)面單獨(dú)的動(dòng)畫(huà)效果

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

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

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

export default {
 transition: 'test'
}

配置全局loading

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

路由

要在頁(yè)面之間使用路由，我們建議使用標(biāo)簽。nuxt會(huì)自動(dòng)在.nuxt生成router.js,用這個(gè)標(biāo)簽跟vue-router的使用基本一致。不需要額外引入vue-router,且根據(jù)我們的目錄名稱來(lái)處理的，不需要我們?cè)趓outer.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>

動(dòng)態(tài)路由

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

pages/
--| news/
-----| _id.vue
-----| index.vue
在index.vue中要根據(jù)不同的id跳到新聞詳情頁(yè)，這里有2種跳轉(zhuǎn)方式，通過(guò)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)嵌子路由，你需要添加一個(gè) Vue 文件，同時(shí)添加一個(gè)與該文件同名的目錄用來(lái)存放子視圖組件。

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

動(dòng)態(tài)嵌套路由，不多見(jiàn)，原理一致

中間件

中間件允許您定義一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁(yè)面或一組頁(yè)面渲染之前。每一個(gè)中間件應(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通用框架,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: