时间：2023-04-23 16:08:46 点击次数：15
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/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 中配置如下:
回到首页，触发部署
-完-
项目源码仓库：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 结合使用的一些经验文章，也是比较有意思的应用体验。
