详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
安装 nuxt.js
nuxt.js 官方提功了两种方法来进行项目的初始化,一种是使用nuxt.js团队的脚手架工具 create-nuxt-app ,一种是根据自己的需求*配置
使用脚手架适合新手,对 nodejs 后台框架有所了解;按照自己需求*配置,需要对如何配置 webpack 以及 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。