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

所属分类: 网络编程 / JavaScript 阅读数: 1595
收藏 0 赞 0 分享

安装 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 标签加一条属性声明下就好

<style lang="sass">
</style>
# or
<style lang="scss">
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

jQuery控制input只能输入数字和两位小数的方法

这篇文章主要介绍了jQuery控制input只能输入数字和两位小数的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue模板语法中数据绑定的实例代码

这篇文章主要介绍了Vue模板语法中数据绑定的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
收藏 0 赞 0 分享

详解 微信小程序开发框架(MINA)

小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。 这篇文章主要介绍了微信小程序开发框架(MINA),需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery实现的点击显示隐藏下拉菜单功能完整示例

这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

angular4应用中输入的最小值和最大值的方法

这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

150行代码带你实现微信小程序中的数据侦听

在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器,感兴趣的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

javascript异步编程的六种方式总结

这篇文章主要介绍了javascript异步编程的六种方式总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS实现的自定义map方法示例

这篇文章主要介绍了JS实现的自定义map方法,结合实例形式分析了javascript自定义map相关的json数组定义、遍历、添加、删除、读取等相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序云开发(数据库)详解

使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JS简单数组排序操作示例【sort方法】

这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多