源码时代前端干货分享|Nuxt开发使用文档

╰+哭是因爲堅強的太久メ 2023-06-15 15:24 108阅读 0赞

*  ## 一、**Nuxt概述** Nuxt官方理解是Vue的通用框架，它的作用主要是用来作SSR（服务器端渲染）。而Vue是开发SPA（单页应用）的js框架。Nuxt采用Vue开发多页应用，并在服务端完成渲染，可以直接用npm ##
    
    run generate命令将制作的vue项目生成为静态html \#\#\# **服务器渲染SSR的好处**  
    SSR渲染的页面主要方便SEO进行搜索优化，比如：新闻 博客  
    电影等网站，就需要大量的进行搜索提供流量查询，这些网站就需要使用SSR进行优化处理，当然并不是所有网站都需要用到SSR，这个就需要看每个公司的产品的用处了
    
    ### **服务器渲染流程** ![图片11.png][11.png] ###
    
    客户端发送url请求到服务器端，服务器端根据接收到的url信息在服务器端完成html+data页面的渲染， 然后将组装成的页面返回给客户端
    
    ### **Nuxt描述** Nuxt中就包含了 Vue开发服务端渲染的应用所需要的各种配置。 在node环境中使用命令nuxt generate 就可以将基于 Vue的应用提供生成对应的静态站点的功能。 ###
    
    Nuxt提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等 \#\#\# **Nuxt特性** 基于 Vue.js 自动代码分层  
    服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES2015+ 语法支持 打包和压缩 JS 和 CSS HTML 头部标签管理  
    本地开发支持热加载 集成 ESLint 支持各种样式预处理器： SASS、LESS、 Stylus 等等 支持 HTTP/2 推送 \#\#  
    二、**Nuxt项目搭建** \#\#\# **方式一：运用Nuxt手脚架(create-nuxt-app)安装** 1.  
    确保安装了npx(npx在npm5.0以上自动安装)后，运行命令  
    !\[图片12.png\](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS04YmY4MTkyMTY0OWQ1YWFkLnBuZw?x-oss-process=image/format,png  
    2 项目选项  
    ![图片13.png][13.png]  
    3. 进入项目  
    ![图片14.png][14.png]
    
    1.  启动项目 ![图片15.png][15.png]
    2.  在浏览器中访问：[http://localhost:3000][http_localhost_3000]或者 [http://127.0.0.1:3000][http_127.0.0.1_3000]  
        ![图片16.png][16.png]
    
    ### 方式二：使用Vue安装Nuxt项目 ###
    
    1.  在全局安装Vue手脚架 ![图片17.png][17.png]  
        使用vue -V测试是否安装成功 2. 在指定的位置创建项目文件名  
        ![图片18.png][18.png]
    2.  Vue命令初始化Nuxt项目 ![图片19.png][19.png]
    3.  创建项目名 ![图片20.png][20.png]
    4.  进入项目，安装依赖 ![图片21.png][21.png]
    5.  启动项目 ![图片22.png][22.png]
    6.  在浏览器中访问：[http://localhost:3000][http_localhost_3000]或者 [http://127.0.0.1:3000][http_127.0.0.1_3000] \#\#  
        三、**Nuxt目录结构**  
        ![图片23.png][23.png]
    
    ## **四、Nuxt个性化配置文件描述(nuxt.config.js)** ![图片24.png][24.png] ##
    
    ## **五、端口配置** 方式一： 在package.json文件中配置 “config”: \{ “nuxt”: \{ “host”: “127.0.0.1”, “port”: “9999” \} \}, 方式二： ##
    
    在nuxt.config.js中配置 server: \{ port: 8000, // 端口号 host:  
    ‘127.0.0.1’, // 主机名 \} \#\# 六、**全局CSS样式配置** 1.创建重置样式表normalize.css文件  
    ![图片25.png][25.png]  
    2.配置nuxt.config.js文件中css属性![图片26.png][26.png]  
    创建的所有页面中就具有重置表的样式 \#\# 七、**路由** 1. 页面之间跳转 原始方式：   
      推荐方式：  
     \*\* \*\*  2.  
    nuxt已经配置好了路由，无需再配置就可以直接使用 比如：  
    ![图片27.png][27.png]  
    Nuxt自动配置的路由如下：  
    ![图片28.png][28.png]  
    3. 动态路由 注意：定义带参数的动态路由，需要在文件中创建以\_开头的vue文件或者文件目录 比如： ![图片29.png][29.png]  
    采用vue中router-link方式写法  
    ![图片30.png][30.png]  
    接收方式  
    ![图片31.png][31.png]  
    4. 路由验证 Nuxt提供了一个专门验证的路由的方法validate方法 ![图片32.png][32.png]
    
    ## **八、过渡动效** 1. 全局过渡效果设置 **注意： 默认使用过渡效果名称： page** 在assets/normalize.css文件中设置 ##
    
    ![图片33.png][33.png]  
    然后在nuxt.config.js中css属性引用就可以让所有页面进入和离开都有过渡效果  
    ![图片34.png][34.png]  
    2. 单个页面过渡动效设置 在assets/normalize.css文件中设置 ![图片35.png][35.png]  
    在\_id.vue页面中调用transtion属性  
    ![图片36.png][36.png]
    
    ## 九、**视图模板** 1. 定义全局默认HTML视图模板，在全局目录中创建app.html文件 ![图片37.png][37.png] ##
    
    1.  页面布局视图模板 A. 在layout/default.vue中定义默认的视图 ![图片38.png][38.png]  
        B. 自定义模板视图 1. 可以在layout中创建lgo.vue文件  
        ![图片39.png][39.png]
    2.  在page中其他组件文件中引用layout属性，值为lgo ![图片40.png][40.png]  
        C. 错误页面 1.  
        通常在layout文件夹中创建一个error.vue页面,虽然他在layout中，但是我们应该把他当作页面，而不是视图模板，而且布局中不需要这个路由出口  
        ![图片41.png][41.png]  
        D. 自定义头部信息  
        ![图片42.png][42.png]
    
    ## 十、**异步数据** **注意： 由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象** 1. Nuxt提供了几种不同的方法来操作asyncData方法 A. promise ( 没有追求 ) ##
    
    B. async 和 await( 有追求 ) 2. Prosmise  
    ![图片43.png][43.png]  
    3. async 和 await ![图片44.png][44.png]  
    渲染页面：  
    ![图片45.png][45.png]

[11.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1jNzkyNjQ5MmJjM2JmZDk2LnBuZw?x-oss-process=image/format,png
[13.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0xZDg3ZTNjYWE2ZjNlMmI4LnBuZw?x-oss-process=image/format,png
[14.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS03MDFkNDhhNjY1NTczMGJmLnBuZw?x-oss-process=image/format,png
[15.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0zYTIyYmQ0NDRjNGFjN2VhLnBuZw?x-oss-process=image/format,png
[http_localhost_3000]: http://localhost:3000
[http_127.0.0.1_3000]: http://127.0.0.1:3000
[16.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0xM2ZiODA2NzFmNTU2ZTg0LnBuZw?x-oss-process=image/format,png
[17.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS01NTI2NTFmZmYxMDNlYjZlLnBuZw?x-oss-process=image/format,png
[18.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1iNmQ0ZDEzNzIwZTE5NjIwLnBuZw?x-oss-process=image/format,png
[19.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0wZDRkODMyNDk0OWZjYTNmLnBuZw?x-oss-process=image/format,png
[20.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1jZTIyOTFiNTA4Njg5NjkyLnBuZw?x-oss-process=image/format,png
[21.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0yZmQ4YTEzNTE5ZjBjZTVjLnBuZw?x-oss-process=image/format,png
[22.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS00MzY0ZGMwZTdlYWIxODhlLnBuZw?x-oss-process=image/format,png
[23.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS01ZTg1OTYxNDc3MWIwN2ViLnBuZw?x-oss-process=image/format,png
[24.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS00MzQ1YTg5MmJiOTc2NTcwLnBuZw?x-oss-process=image/format,png
[25.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1mM2U5MzYxMGU3NDI5ZjI4LnBuZw?x-oss-process=image/format,png
[26.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0yYTMwMjUzNDE1YjI5MDU1LnBuZw?x-oss-process=image/format,png
[27.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS02NTAzN2M0NWJiNDExMDI4LnBuZw?x-oss-process=image/format,png
[28.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0zZjkyNDllMzRjZTllNzBkLnBuZw?x-oss-process=image/format,png
[29.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS00OTllZGViZWMxNWQxMjA2LnBuZw?x-oss-process=image/format,png
[30.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1hN2Q1YWE5MDZiZTBmYWMzLnBuZw?x-oss-process=image/format,png
[31.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1lOGE3N2IzNmM1ZDkxNTc1LnBuZw?x-oss-process=image/format,png
[32.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0xOWZlYzgxOGUzNjgwYzZmLnBuZw?x-oss-process=image/format,png
[33.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1jMTI3NDExNGYwY2Q1ODZkLnBuZw?x-oss-process=image/format,png
[34.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0xYWVkODJkNTYzZWZhNTIwLnBuZw?x-oss-process=image/format,png
[35.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS04ZjIxZjQwMmJmMmU3NTYxLnBuZw?x-oss-process=image/format,png
[36.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS05YTgxMzdkZjc5ODBjMjZkLnBuZw?x-oss-process=image/format,png
[37.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1mMTVjMDQ5YWMxYWI5NDY3LnBuZw?x-oss-process=image/format,png
[38.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS04N2FlY2U4NjFhNjA2ZDE0LnBuZw?x-oss-process=image/format,png
[39.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS02M2Q0MDdjNWJjZWY4MDJkLnBuZw?x-oss-process=image/format,png
[40.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS05YWRiOTc1MWY0MjU1ZTFhLnBuZw?x-oss-process=image/format,png
[41.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0yZjUzMDJlZDM4M2VmYjExLnBuZw?x-oss-process=image/format,png
[42.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS0zYzgzOGEyY2FmYjUyNjIzLnBuZw?x-oss-process=image/format,png
[43.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1kOTAyMTIxNjQzYjBkY2MzLnBuZw?x-oss-process=image/format,png
[44.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1jMWM4NzA4ZDMzMmVmNjMzLnBuZw?x-oss-process=image/format,png
[45.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzIxMTAyMS1jNGQwZTNiZGRiZmU4MTI4LnBuZw?x-oss-process=image/format,png