Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。一直以来网页的制作优先考虑的都是传统的技术方案，但有了 Nuxt 后，我们有了不一样的选择，利用 VUE 技术去开发一个网页应用是非常便捷和复用性很强的，并且如果需要非 SSR 版本的应用，只需要 nuxt generate 的命令即可生成我们所需的静态网页。
先看个示例: 页面示例这个示例页，采用了免费的 netlify 服务进行部署静态页面，有兴趣可以去了解了下，它可以方便的从 git 服务如 github 上直接构建并部署。
这个示例页面的源码在文章未尾中给出，现在我们来看一下如何去得用 vue nuxtjs 去制作一个这样的页面应用:
npx create-nuxt-app <项目名>
2 页面建立由于当前只有一个主页，我们只要在 pages 目录下建立一个 index.vue 即可
├── pages
│ ├── README.md
│ └── index.vue
index.vue 的内容如下
id="app">
我们将页面中的功能分解成各个组件，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
** Global 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/axios
yarn add gasp
yarn add lodash
yarn add node-sass
yarn add sass-loader
yarn add pixi.js
yarn add simplex-noise
其中 sass 相关的包是处理我们的SCSS 样式文件，而 gasp、pixi.js、simplex-noise 是处理 Customer 组件的无限加载客户案例效果所需要的
一切准备就绪后，我们直接执行下面的命令以 dev 模式查看效果
yarn dev
发布yarn generate
执行这个命令后，将会生成 dist 目录，将在其中生成类似如下内容
├── 200.html
├── README.md
├── _nuxt
├── assets
├── favicon.ico
├── index.html
└── tiles.png
将 dist 目录的直接布置至静态服务器即可，如果使用 netlify 的服务，在 Build & deploy 中配置如下:
回到首页，触发部署 -完-项目源码仓库：https://github.com/baisheng/wepy2-homepage
Sketch UI 源文件: https://github.com/baisheng/wepy2-design
后记：事实上仅仅用 nuxtjs 去构建一个简单的静态页面是大材小用，但效果和效率还是相当的赞，这篇文章除本身 nuxtjs + netlify 这个价值点外主要就 pixiJs的应用，在页面中的客户案例版块中，用 pixijs 构建了一个无限展示客户小程序码的效果，它的出现应我们的网页变得更有趣味和动态性。
还有同属 SSR 技术中，React 的世界中有与 nuxt 对等的 next.js ，而单独为了静态页而出现的框架工具 React 中有 Gatsby, Vue 中有VuePress ，都可以方便去实践网页应用与 H5 应用。
后面我会写一些关于 pixijs 与 vuejs 结合使用的一些经验文章，也是比较有意思的应用体验。
