资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

详解基于vue的服务端渲染框架NUXT-创新互联

Nuxt

站在用户的角度思考问题,与客户深入沟通,找到蒙阴网站设计与蒙阴网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖蒙阴地区。

随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度。为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架——NUXT。在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2、vue-router、vuex、vux-meta(管理页面meta信息的),利用官方的脚手架,基本上是傻瓜式操作,不用写路由配置,不用写webpcak配置就可以跑起来一个基于服务端渲染的SPA。

Nuxt特性

NUXT的特性包括:

  1. 基于 Vue.js
  2. 自动代码分层
  3. 服务端渲染
  4. 强大的路由功能,支持异步数据
  5. 静态文件服务
  6. ES6/ES7 语法支持
  7. 打包和压缩 JS 和 CSS
  8. HTML头部标签管理
  9. 本地开发支持热加载
  10. 集成ESLint
  11. 列表项目
  12. 支持各种样式预处理器: SASS、LESS、 Stylus等等

Nuxt目录结构

通过vue init nuxt-community/starter-template 生成的文件目录结构如下:

其中有一些目录(layouts、pages、static、store、nuxt.config.js、package.json)是Nuxt保留的,不可以更改,需要注意一下。

Nuxt路由

Nuxt中的一大特点就是路由无需手动配置,会根据pages下的文件路径自动生成一套路由。如果路由中需要带参数,只需将pages下的文件已下划线_作为前缀即可。例如pages下的目录结构如下:

pages/
--| user/
-----| index.vue
-----| one.vue
-----| _id.vue
--| index.vue

分享名称:详解基于vue的服务端渲染框架NUXT-创新互联
文章位置:http://www.cdkjz.cn/article/dppejg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220