基于Vue.js服务器端渲染框架Nuxt.js(初识)

Posted 2021-03-30 猫之时光

奉上万能教程：

Nuxt.js：https://zh.nuxtjs.org/guide

Vue SSR指南：https://ssr.vuejs.org/zh/

---

奉上关键：

亮点： 

    运行nuxt命令，启动支持 热加载 、服务端渲染（vue-server-render）的开发服务器

---

一大波美食来袭：

    1）静态化（预渲染）：nuxt generate   命令

         ·  根据路由的配置将每一个路由静态化成对应html文件

            |-- pages/

                  |--about/

                      --index.vue

                  --index.vue

         静态化成：可在任何静态站点服务商托管你的web应用。

无服务端自动静态化Web应用

             |--dist /

                 |--about/

                     index.html

                 --index.html

    2）特性：

            a.基于Vue.js

            b.服务器端渲染

            c.强大路由功能，支持异步数据

            d.支持ES6/ES7

            e.打包压缩JS/CSS

            f.热加载

            g.预处理SASS、LESS

     官网更详细

---

接下来尽情享受吧！

1. 安装

   
   

注意：npx在npm5.2.0版本默认安装

（1）安装过程中提供选项：随你

     a。服务器端框架：Express/Koa……

     b。UI框架：Bootstrap/Element UI

     c。模式：Universal or SPA

         Universal or SPA 对SEO的实现存在差异

         SPA单页，只有一个入口文件，网站服务器端渲染最多只被搜索引擎收录一个页面，而Universal  实现所有网站路径完全被收录

     d。添加axios module模块

2.启动项目

http://localhost:3000浏览

      

恭喜你成功知道了什么是Nuxt.js

---

前端的路一望无尽，只有在不断的探索中，才能知晓路途的美好

努力蹦跶的小菜 送上祝福，下期我们继续蹦跶。