用 Nuxtjs 写个单页面应用

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
一直以来网页的制作优先考虑的都是传统的技术方案，但有了 Nuxt 后，我们有了不一样的选择，利用 VUE 技术去开发一个网页应用是非常便捷和复用性很强的，并且如果需要非 SSR 版本的应用，只需要 nuxt generate 的命令即可生成我们所需的静态网页。

先看个示例:
示例页面

image.png

这个示例页，采用了免费的 netlify 服务进行部署静态页面，有兴趣可以去了解了下，它可以方便的从 git 服务如 github 上直接构建并部署。

这个示例页面的源码在文章未尾中给出，现在我们来看一下如何去得用 vue nuxtjs 去制作一个这样的页面应用:

1 构建项目

npx create-nuxt-app <项目名>

2 页面建立

由于当前只有一个主页，我们只要在 pages 目录下建立一个 index.vue 即可

├── pages
│   ├── README.md
│   └── index.vue

index.vue 的内容如下

我们将页面中的功能分解成各个组件，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/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
├── data
├── favicon.ico
├── img
├── index.html
└── tiles.png

将 dist 目录的直接布置至静态服务器即可，如果使用 netlify 的服务，在 Build & deploy 中配置如下:

WechatIMG107.jpg

回到首页，触发部署

WechatIMG68.jpg

-完-

源码库：https://github.com/baisheng/wepy2-homepage
Sketch UI: https://github.com/baisheng/wepy2-design

后记：事实上仅仅用 nuxtjs 去构建一个简单的静态页面是大材小用，但效果和效率还是相当的赞。同属 SSR 技术中，React 的世界中有与 nuxt 对等的 next.js ，而单独为了静态页而出现的框架工具 React 中有 Gatsby, Vue 中有VuePress ，都可以方便去实践网页应用与 H5 应用。

用 Nuxtjs 写个单页面应用

你可能感兴趣的:(用 Nuxtjs 写个单页面应用)