其实网站公告单页源码的问题并不复杂，但是又很多的朋友都不太了解用 Nuxtjs + PixiJs 写个单页网站，并在netlify免费部署，因此呢，今天小编就来为大家分享网站公告单页源码的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
Nuxt.js是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。一直以来网页的制作优先考虑的都是传统的技术方案，但有了Nuxt后，我们有了不一样的选择，利用VUE技术去开发一个网页应用是非常便捷和复用性很强的，并且如果需要非SSR版本的应用，只需要nuxtgenerate的命令即可生成我们所需的静态网页。
先看个示例:
页面示例
这个示例页，采用了免费的netlify服务进行部署静态页面，有兴趣可以去了解了下，它可以方便的从git服务如github上直接构建并部署。
这个示例页面的源码在文章未尾中给出，现在我们来看一下如何去得用vuenuxtjs去制作一个这样的页面应用:
1构建项目
npxcreate-nuxt-app<项目名>\n
2页面建立
由于当前只有一个主页，我们只要在pages目录下建立一个index.vue即可
├──pages\n│├──README.md\n│└──index.vue\n
index.vue的内容如下
<template>\n<div\nid=&34;\nstyle=&34;>\n\n<c-nav@toggleWechat=&34;/>\n\n<main\nid=&customers&34;customerscustomer-page&34;cases&39;~/components/CHero.vue&39;~/components/CNav.vue&39;~/components/CFooter.vue&39;~/components/CFeatures.vue&39;~/components/CodeSample.vue&39;~/components/Customer.vue&39;lodash&39;/data/cases.json&39;./package&39;spa&39;utf-8&39;viewport&39;width=device-width,initial-scale=1&39;description&39;description&39;icon&39;image/x-icon&39;/favicon.ico&39;39;},\n\n/*\n**GlobalCSS\n*/\ncss:[\n{src:&39;},\n],\n\n/*\n**PluginstoloadbeforemountingtheApp\n*/\nplugins:[\n{src:&39;,ssr:false},\n{src:&39;,ssr:false},\n&39;\n],\n\n/*\n**Nuxt.jsmodules\n*/\nmodules:[\n&39;\n],\n\naxios:{\n//proxyHeaders:false\nproxyHeaders:false,\ncredentials:false\n},\n\n/*\n**Buildconfiguration\n*/\nbuild:{\n/*\n**Youcanextendwebpackconfighere\n*/\nextend(config,ctx){\n//RunESLintonsave\nif(ctx.isDev&&ctx.isClient){\nconfig.module.rules.push({\nenforce:&39;,\ntest:/\\.(js|vue)$/,\nloader:&39;,\nexclude:/(node_modules)/\n})\n}\n}\n}\n}\n
在页面中由于我们用到了一些第三方的库和nuxt的一个社区模块axios去请求一些必要的json数据，需要将这些库安装到我们的项目中
yarnadd@nuxtjs/axios\nyarnaddgasp\nyarnaddlodash\nyarnaddnode-sass\nyarnaddsass-loader\nyarnaddpixi.js\nyarnaddsimplex-noise\n…\n
其中sass相关的包是处理我们的SCSS样式文件，而gasp、pixi.js、simplex-noise是处理Customer组件的无限加载客户案例效果所需要的
一切准备就绪后，我们直接执行下面的命令以dev模式查看效果
yarndev\n
发布
yarngenerate\n
执行这个命令后，将会生成dist目录，将在其中生成类似如下内容
.\n├──200.html\n├──README.md\n├──_nuxt\n├──assets\n├──data\n├──favicon.ico\n├──img\n├──index.html\n└──tiles.png\n
将dist目录的直接布置至静态服务器即可，如果使用netlify的服务，在Build&deploy中配置如下:
回到首页，触发部署
-完-
项目源码仓库：https://github.com/baisheng/wepy2-homepageSketchUI源文件:https://github.com/baisheng/wepy2-design
后记：事实上仅仅用nuxtjs去构建一个简单的静态页面是大材小用，但效果和效率还是相当的赞，这篇文章除本身nuxtjs+netlify这个价值点外主要就pixiJs的应用，在页面中的客户案例版块中，用pixijs构建了一个无限展示客户小程序码的效果，它的出现应我们的网页变得更有趣味和动态性。
还有同属SSR技术中，React的世界中有与nuxt对等的next.js，而单独为了静态页而出现的框架工具React中有Gatsby,Vue中有VuePress，都可以方便去实践网页应用与H5应用。
后面我会写一些关于pixijs与vuejs结合使用的一些经验文章，也是比较有意思的应用体验。
网站公告单页源码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于用 Nuxtjs + PixiJs 写个单页网站，并在netlify免费部署、网站公告单页源码的信息别忘了在本站进行查找哦。