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


Posted in Javascript onMarch 13, 2019

安装 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 属性,一般是在输入上面命令时的项目名,不需要修改直接回车就好

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

2.项目描述

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

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

3.选择服务器端框架

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

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

4.扩展插件

选择 axios EsLint Prettier

  • axios 发送HTTP请求
  • EsLint 在保存时代码规范和错误检查自己的代码。
  • Prettier 在保存时格式化/美化自己的代码。

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

5.选择 UI 框架

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

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

6.选择测试框架

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

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

7.选择渲染模式

这里分单页应用(spa)以及普遍的方式(Universal),单页应用有很多路由但是页面只有一个,所有能看到的页面都是 js 即时生成的 dom,第二种是在服务器生成 html ,有多少路由就有多少页面。

使用 nuxt 就是为了解决 SEO 的问题,使其实现所有网站路径完全被收录

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

8.作者

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

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

9.选择包管理工具

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

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

10.选择完成开始安装

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

11.安装完成

提示信息

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

项目目录

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

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

添加其他常用功能

除了 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>

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

Javascript 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
react同构实践之实现自己的同构模板
Mar 13 #Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 #Javascript
你可能不知道的CORS跨域资源共享
Mar 13 #Javascript
react项目如何使用iconfont的方法步骤
Mar 13 #Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
深入Node TCP模块的理解
Mar 13 #Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
图片之间的切换
2006/06/26 Javascript
jQuery 1.0.2
2006/10/11 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python之信息加密题目详解
2019/06/26 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python中random模块详解
2021/03/01 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
洗车工岗位职责
2014/03/15 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
文明家庭事迹材料
2014/12/20 职场文书
环保宣传语大全
2015/07/13 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python