详解使用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 相关文章推荐
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
Seajs的学习笔记
Mar 04 Javascript
javascript操作数组详解
Dec 17 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
基于python实现模拟数据结构模型
2020/06/12 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
春节联欢晚会主持词
2014/03/24 职场文书
班主任新年寄语
2014/04/04 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
雷峰塔导游词
2015/02/09 职场文书
欠条样本
2015/07/03 职场文书
决心书格式范文
2015/09/23 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python