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

     更新时间:2019年03月13日 14:33:07   作者:yhtx1997   我要评论

    这篇文章主要介绍了详解使用Nuxt.js快速搭建服务端渲染(SSR)应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    安装 nuxt.js

    Nuxt.js 官?#25945;?#21151;了两种方法来进行项目的初始化,一?#36136;?#20351;用Nuxt.js团队的脚手架工具 create-nuxt-app ,一?#36136;?#26681;据自己的需求自由?#28210;?

    使用脚手架适合新手,对 nodejs 后台框架有所了解;按照自己需求自由?#28210;茫?#38656;要对如何?#28210;?webpack 以及 nodejs 后台框架有所了解。

    两种方式比较下就是原生和插件的区别。

    使用脚手架安装

    需要有 nodejs 或者yarn 环?#24120;?#25512;荐使用 vscode ?#28304;?#30340;控制台输入命令行命令进行操作

    在有了环境之后直接输入以下命令就可以直接创建一个项目(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),单页应用有很多路由但是页面只有一个,所?#24515;?#30475;到的页面都是 js ?#35789;?#29983;成的 dom,第二?#36136;?#22312;服务器生成 html ,有多少路由就有多少页面。

    使用 nuxt 就是为了解决 SEO 的问题,使其实现所有网站路径完全被?#31456;?/p>

    8.作者

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

    9.选择包管理工具

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

    10.选择完成开始安装

    11.安装完成

    提示信息

    项目目录

    关于如何根据自己的需求自由?#28210;茫?#36825;里不讲,?#34892;?#35201;自由?#28210;?#30340;一般都不是新手了,推荐看看官方文档

    添加其他常用功能

    除了 nuxt 脚手架?#28304;?#30340;,我们还需要其他?#28210;茫珽S6的编译 ,CSS的预处理,其他的用到了再添加

    安装 babel

    yarn add babel-cli babel-preset-env

    ?#28210;?#25991;件

    .babelrc

    {
     "presets": ["env"]
    }

    安装 scss

    yarn add node-sass 
    yarn add sass-loader

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

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

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

    相关文章

    • User Scripts: Video Download by User Scripts

      User Scripts: Video Download by User Scripts

      User Scripts: Video Download by User Scripts...
      2007-05-05
    • javascript实现完美拖拽效果

      javascript实现完美拖拽效果

      javascript实现的拖拽效果,可以把屏幕上的?#35745;?#25302;动到?#25105;?#22320;方,效果平滑,点击?#35745;?#36824;可?#28304;硬?#36793;展开?#35745;?#30340;详细信息,非常好的相册效果
      2015-05-05
    • 支持移动端原生js轮播图

      支持移动端原生js轮播图

      这篇文章主要介绍了支持移动端原生js轮播图的相关资?#24076;?#20855;有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
      2017-02-02
    • js封装成插件的步骤方法

      js封装成插件的步骤方法

      本篇文章主要介绍了js封装成插件的步骤方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-09-09
    • 一个多次搜索+多次传值的解决方案

      一个多次搜索+多次传值的解决方案

      一个多次搜索+多次传值的解决方案...
      2007-01-01
    • Javascript实时柱状图实现代码

      Javascript实时柱状图实现代码

      js实现的实时柱状图,非常有创意的想法。
      2008-10-10
    • js对象基础实例分析

      js对象基础实例分析

      这篇文章主要介绍了js对象基础,以实例形式分析了js对象的创建、读取及遍历等技巧,需要的朋友可以参考下
      2015-01-01
    • 使用requestAnimationFrame实现js动画性能好

      使用requestAnimationFrame实现js动画性能好

      requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销,这篇文章给大家详细介绍使用requestAnimationFrame实现js动画
      2015-08-08
    • 跟我学习javascript的严格模式

      跟我学习javascript的严格模式

      跟我学习javascript的严格模式,对javascript严格模式进行概述,进入严格模式的方法,以及如何调用和相关语法,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
      2015-11-11
    • JS实现动态给标签控件添加事件的方法示例

      JS实现动态给标签控件添加事件的方法示例

      这篇文章主要介绍了JS实现动态给标签控件添加事件的方法,结合实例形式分析了javascript简单实现动态添加事件的相关操作技巧,需要的朋友可以参考下
      2017-05-05

    最新评论

    山东群英会开奖查询