nuxt開發入門

預處理器的使用

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

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

／／全局css
  css: [
    {
      src: 'static/less/base.sass',
      lang: 'less'
    }
  ],
  ／／頁面中使用

    <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文件的問題。

使用插件、第三方模塊

//經過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爲例（我我的很是中意的組件庫）

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

中間件

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

// 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中間件，若是用戶未登陸，則跳轉登陸頁。

視圖和錯誤頁

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

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示例代碼