Nuxt框架實踐

nuxt

前言

今天抽空過了遍nuxt文檔,寫了個實踐demo,關於nuxt我已經斷斷續續看了好幾遍了,自我感受也算是入門了吧,從開發到上線內心都有底。後期打算在項目用起來的是nuxt框架,一些函數工具庫,好比ramda,lodash等等,後臺服務估計會使用### fastify 這個庫,目測很是方便,嘗試嘗試。css

基礎只是仍是以官方文檔爲主,嘗試過程當中若是有什麼問題能夠留言,看到會回覆,文章若有錯誤,歡迎指正。html

預處理器的使用

安裝須要的loader後指定lang就能夠直接使用。vue

npm i less less-loader --save--dev

//全局css
 css: [
    { src: '~assets/css/main.less', lang: 'less' },
    { src: 'iview/dist/styles/iview.css'}
  ],
  //頁面中使用

    <style lang="less" scoped></style>

頁面loading

//禁用
module.exports = {
  loading: false
}

//顏色條
module.exports = {
loading: { color: '#3B8070' }
}

//使用組件
添加一個loading組件 (官方示例以下,詳情可看官方文檔)
引用該組件
module.exports = {
  loading: '~components/loading.vue'
}
///  components/loading.vue

 <template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

按照官方引用組件的方法,我測試報了個錯,把~/ 改爲 ./ 解決。估計是nuxt解析vue文件的問題。ios

使用插件、第三方模塊

//經過script標籤

 head: {  
     script: [
      { src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' }
    ]
  },
  
  //plugins配置 , ssr:false 設置只在客戶端使用
  
   plugins: [
    { src: '~plugins/flexible.js', ssr: false }
  ],

//在頁面中使用axios,配置vendor使其只打包一次

//頁面
<template>
  <h1>{{ title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

//配置文件

module.exports = {
  build: {
    vendor: ['axios']
  }
}

使用第三方組件庫

在nuxt裏使用第三方UI組件庫也很是簡單。以iview爲例(我我的很是中意的組件庫)nginx

///在plugins下新建 iview.js

import Vue from 'vue'
import iView from 'iview';

Vue.use(iView);

////配置文件引入css和plugin

module.exports = {
  css: [
    { src: 'iview/dist/styles/iview.css'}
  ],
  plugins: [
    { src: '~plugins/iview.js', ssr: false }
  ],
 
}

路由

//基礎路由示例, 詳情請看官方文檔

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue


router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

nuxt爲咱們省去了定義路由的過程,頁面結構自動生成路由,不得不說,這對開發效率是有比較大的提高。官方還提供了路由切換動畫,中間件等配置,咱們能夠在切換路由時良好的控制頁面。git

中間件

開發後臺管理頁面的時候,咱們常常有autu認證需求,若是沒有登陸,或者權限問題,都有一個腳本去控制跳轉,中間件就派上用場了。github

//  middleware/auth.js
  
export default function ({ store, redirect }) {
  if (!store.state.user) {
    return redirect('/login')
  }
}

//頁面單獨使用

export default {
  middleware: 'auth'
  }

///全局使用

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

上面咱們定義了一個auth中間件,若是用戶未登陸,則跳轉登陸頁。mongodb

視圖和錯誤頁

通常開發SPA頁面,咱們通常是組件+頁面混合開發,,nuxt則是固定佈局layouts,路由必須採用一個layouts,默認default,頁面內部咱們能夠像個vue開發那樣引入多個components。vuex

nuxt能夠定義個錯誤頁,在layouts下定義個error.vue文件。具體代碼能夠看官方文檔數據庫

asyncData

nuxt擴展的異步數據方法,對於頁面數據,咱們通常有頁面data定義的形式和vuex統一管理的形式,能夠根據本身的需求選擇。

data定義這裏就不贅述了,這裏說一下vuex統一管理數據的作法。

///page頁面
<template>
  <div class="container">
    <p class="title">數據展現!</p>
    <Table :columns="columns1" :data="data1"></Table>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import axios from 'axios'
  
  export default {
    middleware: 'auth',  //定義頁面中間件
    head () {
      return {
        title: '其餘頁面'
      }
    },
    data () {
      return {}
    },
    async fetch ({ store, params }) {
      let { data } = await axios.get('http://106.14.205.222/article/list?page=1&limit=10&isActive=1')
      console.log( data )
      store.commit('SET_LIST', data.list)
    },
    computed: {
      ...mapState([
        // 映射 this.xxx 爲 store.state.xxx
        'columns1',
        'data1'
      ])
    },
  }
</script>


  
  
//store  index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  
  state: {
    columns1: [
      {
        title: '標題',
        key: 'title'
      },
      {
        title: '介紹',
        key: 'intro'
      },
      {
        title: '日期',
        key: 'time'
      }
    ],
    data1: [],
    user: 'xu' //若是爲空,則會中間件控制跳轉404
  },
  mutations: {
    SET_LIST: (state, data) => {
      state.data1 = data
    },
  }
})

export default store

這裏經過fetch刷新了vuex的數據,頁面映射了store的數據,這種寫法咱們能夠經過this.xxx 處理vuex的數據。demo爲了快捷只用了index演示,常規項目咱們應該採用模塊寫法。

權限配置(高級-路由鑑權)

仍是關於session 和 登陸相關的一些權限問題,官方高級文檔有很是詳細的例子。這裏就不在demo裏再現了。路由鑑權

對vuex管理數據有興趣的同窗, 能夠多看看vuex狀態樹 和權限相關的文章或者應用,固然官方文檔是要爛熟於心的。

後臺開發以及項目部署

後臺開發通常就是在項目下在創建一個server文件夾,作到同時輸出API和頁面,咱們能夠選擇本身喜歡的服務框架 ,好比express活着koa,將nuxt 介入到服務框架來,就能夠完成所謂的同構開發。能夠看看一個koa例子:

import Koa from 'koa'
import Nuxt from 'nuxt'
import nuxtConf from '../nuxt.config'


const app = new Koa()

const start = async () => {
  let config = require('../nuxt.config.js')
  config.dev = !(app.env === 'production')
  const nuxt = await new Nuxt(config)

  if (conf.env !== 'production') {
    try {
      await nuxt.build()
    } catch (e) {
      console.error(e)
      process.exit(1)
    }
  }

  app.use(async (ctx, next) => {
    ctx.status = 200
    await nuxt.render(ctx.req, ctx.res)
  })

  app.listen(conf.port, conf.host)
  console.log('Server listening on ' + conf.host + ':' + conf.port) // eslint-disable-line no-console
}

start()

nuxt自身提供了一個部署命令,能夠經過 npm run start 來運行,nuxt還能生成靜態頁,你能夠在在別的地方託管你的網站,好比Githubpage和cdn。喜歡同一管理上線的項目的同窗,推薦用pm2 來進行部署。

一臺機器,好幾個項目,就能夠用nginx來進行反向代理端口。nginx也算是上線必不可少的一步,有空我也會寫一篇實踐文章。

官方也有提供服務框架版本,好比express https://github.com/nuxt-community/express-template ,還有其餘的能夠自行Github🔍

後記

nuxt的學習曲線很是小,就像vue框架同樣,已是一個開箱即用的狀態,咱們能夠直接跨過配置直接開發。對配置有興趣的能夠在vue官方文檔找到ssr渲染文檔。

原本是想寫nuxt + koa + mongodb 的全棧式應用文章的,可是最近比較忙,這個計劃只能擱置了。有些方法和好用的東西我我也是最近才學習,以爲不錯在文章裏作一個分享和記錄。來源的話是慕課網Scott老師的《開發微信全家桶項目 Vue/Node/MongoDB高級技術棧全覆蓋》視頻教程,課程級別爲高級,有些地方我本身也是雲裏霧裏,好比API分層,控制器。。不過最讓人頭疼的仍是微信那一堆認證。。。。

整個nuxt的簡單demo我都放在了Github ,對上面的scott老師的視頻教程有興趣的同窗,也能夠在Github找到源碼。demo多實踐,工做少踩坑,小公司如今最讓我開心的估計是自主開發了,公司項目我能夠本身選擇使用什麼技術。想怎麼寫怎麼寫,能夠申請整個開發項目,本身開發頁面,服務器,數據庫,心大的能夠用rn開發app。。。相應的這鍋也要背好,有壓力有動力嘛,寫代碼這麼愉快的事對吧~

傳送門: Nuxt示例代碼

若是以爲本文對你有所幫助,就star一下吧~大傳送之術! 個人博客Github

相關文章
相關標籤/搜索