nuxt.js基於ssh的vue通用框架

Nuxt.js 是一個基於 Vue.js 的通用應用框架。 經過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。

Nuxt.js是特色（優勢）：

• 基於 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數據
• 靜態文件服務
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標籤管理
• 本地開發支持熱加載
• 集成ESLint
• 支持各類樣式預處理器： SASS、LESS、 Stylus等等

vue-cli3如何安裝？

yarn global add @vue/cli-init
npm init nuxt-app my-project  // 初始化一個nuxt項目
複製代碼

目錄結構

全局配置

配置全局樣式nuxt.config.js

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

配置全局標題和meta

在nuxt.config.js

head: {
    title: 'nuxt項目實戰',
    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 默認使用的過渡效果名稱爲 page 在全局樣式文件 assets/css/main.css 這裏假設是main.css裏添加一下樣式：

.page-enter-active,           //頁面進入激活的效果和頁面離開的動效
.page-leave-active {
  transition: opacity 1s;
}
.page-enter,                 // 頁面進入和頁面離開激活的效果
.page-leave-active {
  opacity: 0;
}
複製代碼

配置頁面單獨的動畫效果

在全局樣式文件 assets/css/main.css 這裏假設是main.css裏添加一下樣式： .後面加頁面的單獨屬性，如test

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

而後咱們將頁面組件中的 transition 屬性的值設置爲 test 便可：

export default {
  transition: 'test'
}
複製代碼

配置全局loading

module.exports = {
    loading: {color: '#fff'},
}
複製代碼

路由

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

基礎路由

<nuxt-link :to="{name:'index'}">Home</nuxt-link>  //能夠根據to，path跳轉，一樣能夠傳參params,query
 <nuxt-link :to="{name:'about',query:{id:123}}">about</nuxt-link>
複製代碼

動態路由

在 Nuxt.js 裏面定義帶參數的動態路由，須要建立對應的如下劃線做爲前綴的 Vue 文件 或 目錄。

pages/
--| news/
-----| _id.vue
-----| index.vue
在index.vue中要根據不一樣的id跳到新聞詳情頁，這裏有2種跳轉方式，經過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中能夠接收到參數{{$route.params.newdetail}}
複製代碼

路由參數效驗

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

嵌套路由

建立內嵌子路由，你須要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。

在父組件(.vue文件) 內增長 用於顯示子視圖內容

動態嵌套路由，很少見，原理一致

中間件

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

module.exports = {
   router:{
    middleware: 'check-auth'
  }
}
複製代碼

配置錯誤頁面

在layouts下面新建一個error.vue

默認模板和默認佈局

公共的頭部和footer如何定義

有2種方法 默認模板 app.html 改了以後須要重啓服務

默認佈局 在nuxt開發當中則是./layout/default.vue

配上我本身測試的連接nuxt-demo