Nuxt.js 是一個基於 Vue.js 的通用應用框架。通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。一直以來網頁的製作優先考慮的都是傳統的技術方案，但有了 Nuxt 後，我們有了不一樣的選擇，利用 VUE 技術去開發一個網頁應用是非常便捷和複用性很強的，並且如果需要非 SSR 版本的應用，只需要 nuxt generate 的命令即可生成我們所需的靜態網頁。
先看個示例:
頁面示例
這個示例頁，採用了免費的 netlify 服務進行部署靜態頁面，有興趣可以去了解了下，它可以方便的從 git 服務如 github 上直接構建並部署。
這個示例頁面的原始碼在文章未尾中給出，現在我們來看一下如何去得用 vue nuxtjs 去製作一個這樣的頁面應用:
1 構建專案
npx create-nuxt-app <專案名>2 頁面建立
由於當前只有一個主頁，我們只要在 pages 目錄下建立一個 index.vue 即可
├── pages│ ├── README.md│ └── index.vueindex.vue 的內容如下
<template> <div id="app" style="position: relative;"> <c-nav @toggleWechat="toggleWechat"/> <main id="#customers" class="customers customer-page"> <c-hero/> <c-features /> <code-sample /> <customer :case-data="cases"/> <c-footer /> </main> </div></template><script> import CHero from '~/components/CHero.vue' import CNav from '~/components/CNav.vue' import CFooter from '~/components/CFooter.vue' import CFeatures from '~/components/CFeatures.vue' import CodeSample from '~/components/CodeSample.vue' import Customer from '~/components/Customer.vue' import { filter, isEmpty } from 'lodash' export default { components: { CHero, CNav, CodeSample, Customer, CFooter, CFeatures // Logo }, async asyncData({ app }) { const response = await fetch('/data/cases.json') const json = await response.json(); return { cases: json.cases } }, data () { return { textCases: [], rollCases: [], isQrShow: false } }, methods: { toggleWechat () { this.isQrShow = !this.isQrShow }, wxEnter: function() { this.isQrShow = true }, modalClick: function() { this.isQrShow = false } } }</script>我們將頁面中的功能分解成各個元件，Logo、Nav、Hero、Features、CodeSample、Customer、Footer，各元件中的程式碼詳見文尾的原始碼庫
編寫好頁面後，我們去配置我們的網頁應用的 Meta 以及 header 中的資訊
開啟 nuxt.config.js 配置如下
const pkg = require('./package')module.exports = { mode: 'spa', /* ** Headers of the page */ head: { title: pkg.name, 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' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ {src: '~assets/scss/front.scss'}, ], /* ** Plugins to load before mounting the App */ plugins: [ {src: '~/plugins/pixi', ssr: false}, {src: '~/plugins/mpshow', ssr: false}, '~/plugins/prism' ], /* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios' ], axios: { // proxyHeaders: false proxyHeaders: false, credentials: false }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } }}在頁面中由於我們用到了一些第三方的庫和 nuxt 的一個社群模組 axios 去請求一些必要的 json 資料，需要將這些庫安裝到我們的專案中
yarn add @nuxtjs/axiosyarn add gaspyarn add lodashyarn add node-sassyarn add sass-loaderyarn add pixi.jsyarn add simplex-noise…其中 sass 相關的包是處理我們的SCSS 樣式檔案，而 gasp、pixi.js、simplex-noise 是處理 Customer 元件的無限載入客戶案例效果所需要的
一切準備就緒後，我們直接執行下面的命令以 dev 模式檢視效果
yarn dev釋出
yarn generate執行這個命令後，將會生成 dist 目錄，將在其中生成類似如下內容
.├── 200.html├── README.md├── _nuxt├── assets├── data├── favicon.ico├── img├── index.html└── tiles.png將 dist 目錄的直接佈置至靜態伺服器即可，如果使用 netlify 的服務，在 Build & deploy 中配置如下:
回到首頁，觸發部署
-完-
專案原始碼倉庫：https://github.com/baisheng/wepy2-homepageSketch UI 原始檔: https://github.com/baisheng/wepy2-design後記：事實上僅僅用 nuxtjs 去構建一個簡單的靜態頁面是大材小用，但效果和效率還是相當的贊，這篇文章除本身 nuxtjs + netlify 這個價值點外主要就 pixiJs的應用，在頁面中的客戶案例版塊中，用 pixijs 構建了一個無限展示客戶小程式碼的效果，它的出現應我們的網頁變得更有趣味和動態性。
還有同屬 SSR 技術中，React 的世界中有與 nuxt 對等的 next.js ，而單獨為了靜態頁而出現的框架工具 React 中有 Gatsby, Vue 中有VuePress ，都可以方便去實踐網頁應用與 H5 應用。
後面我會寫一些關於 pixijs 與 vuejs 結合使用的一些經驗文章，也是比較有意思的應用體驗。