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 的内容如下
<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/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 应用。
网友评论