使用 Nuxt.js 快速搭建服务端渲染(SSR) 应用

luodongseu 发布于2019-08-26 13:37 / 2593人阅读

摘要：安装官方提功了两种方法来进行项目的初始化，一种是使用团队的脚手架工具，一种是根据自己的需求自由配置使用脚手架适合新手，对后台框架有所了解按照自己需求自由配置，需要对如何配置以及后台框架有所了解。两种方式比较下就是原生和插件的区别。

安装 nuxt.js

Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种是根据自己的需求自由配置
使用脚手架适合新手，对 nodejs 后台框架有所了解；按照自己需求自由配置，需要对如何配置 webpack 以及 nodejs 后台框架有所了解。
两种方式比较下就是原生和插件的区别。

使用脚手架安装

需要有 nodejs 或者 yarn 环境，推荐使用 vscode 自带的控制台输入命令行命令进行操作

在有了环境之后直接输入以下命令就可以直接创建一个项目（npx 在npm 5.2.0默认安装，使用最新稳定nodejs环境不用考虑有没有）

npx create-nuxt-app <项目名>

#或者用yarn

yarn create nuxt-app <项目名>

之后他会提示你进行一些选择
1.项目名

在这里可以设置项目名，亦可以之后在 package.js 中设置 name 属性，一般是在输入上面命令时的项目名，不需要修改直接回车就好

2.项目描述

这里是关于项目的描述，比如是做什么的，也可以之后在 package.js 中设置 description 属性

3.选择服务器端框架

看自己习惯使用什么了，一般 Express Koa 居多

4.扩展插件
选择 axios EsLint Prettier

axios 发送HTTP请求

EsLint 在保存时代码规范和错误检查自己的代码。

Prettier 在保存时格式化/美化自己的代码。

5.选择 UI 框架

UI 框架方便快速开发，提供了很多现成的样式，近几年听到最多的就是 Element UI

6.选择测试框架

测试框架是用来检测程序有没有到达预期的目的，有没有出错，这里暂时用不到，所以选择 none 就好

7.选择渲染模式

这里分单页应用（spa）以及普遍的方式（Universal），单页应用有很多路由但是页面只有一个，所有能看到的页面都是 js 即时生成的 dom，第二种是在服务器生成 html ，有多少路由就有多少页面。
使用 nuxt 就是为了解决 SEO 的问题，使其实现所有网站路径完全被收录

8.作者

这个也可以之后在 package.js 中设置 author 属性

9.选择包管理工具

这里选择那个都可以，看自己习惯用哪个

10.选择完成开始安装

11.安装完成

提示信息

项目目录

关于如何根据自己的需求自由配置，这里不讲，有需要自由配置的一般都不是新手了，推荐看看官方文档

添加其他常用功能

除了 nuxt 脚手架自带的，我们还需要其他配置，ES6的编译，CSS的预处理，其他的用到了再添加

安装 babel

yarn add babel-cli babel-preset-env

配置文件
.babelrc

{
  "presets": ["env"]
}

安装 scss

yarn add node-sass 
yarn add sass-loader

之后只需要在 vue 文件的 style 标签加一条属性声明下就好



# or

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109175.html

使用 Nuxt.js 快速搭建服务端渲染(SSR) 应用

摘要：安装官方提功了两种方法来进行项目的初始化，一种是使用团队的脚手架工具，一种是根据自己的需求自由配置使用脚手架适合新手，对后台框架有所了解按照自己需求自由配置，需要对如何配置以及后台框架有所了解。两种方式比较下就是原生和插件的区别。安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种...

leanote 2019-06-26 17:59 评论0 收藏0
Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
服务端预渲染之Nuxt（介绍篇）

摘要：为了解决问题，推出了服务端预渲染，以便提高对优化。应用，到了，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式渲染出来的，称之为客户端渲染。客户端接收数据，然后完成最终渲染。通过对客户端服务端基础框架的抽象组织，主要关注的是应用的渲染。现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前...

Shonim 2019-08-23 16:46 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0