澳门mgm线上娱乐

028-86261949

当前位置:澳门mgm线上娱乐 > 技术交流 > Nuxt开发使用文档

Nuxt开发使用文档

2019/11/18 14:41 分类: 技术交流 浏览:1

一、Nuxt概述

澳门mgm线上娱乐Nuxt官方理解是Vue的通用框架,它的作用主要是用来作SSR(服务器端渲染)。而Vue是开发SPA(单页应用)的js框架。Nuxt采用Vue开发多页应用,并在服务端完成渲染,可以直接用npm run generate命令将制作的vue项目生成为静态html

 

服务器渲染SSR的好处

SSR渲染的页面主要方便SEO进行搜索优化,比如:新闻 博客 电影等网站,就需要大量的进行搜索提供流量查询,这些网站就需要使用SSR进行优化处理,当然并不是所有网站都需要用到SSR,这个就需要看每个公司的产品的用处了

 

服务器渲染流程

         

客户端发送url请求到服务器端,服务器端根据接收到的url信息在服务器端完成html+data页面的渲染, 然后将组装成的页面返回给客户端

 

Nuxt描述

Nuxt中就包含了 Vue开发服务端渲染的应用所需要的各种配置。

在node环境中使用命令nuxt generate 就可以将基于 Vue的应用提供生成对应的静态站点的功能。

Nuxt提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等

 

Nuxt特性

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能,支持异步数据

静态文件服务

ES2015+ 语法支持

澳门mgm线上娱乐打包和压缩 JS 和 CSS

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

澳门mgm线上娱乐支持各种样式预处理器: SASS、LESS、 Stylus 等等

支持 HTTP/2 推送

 

二、Nuxt项目搭建

方式一:运用Nuxt手脚架(create-nuxt-app)安装

 

澳门mgm线上娱乐 1. 确保安装了npx(npx在npm5.0以上自动安装)后,运行命令

 

 

2. 项目选项

    

 

3. 进入项目

     

 

4. 启动项目

       

 

5. 在浏览器中访问: 或者

        

 

方式二:使用Vue安装Nuxt项目

1. 在全局安装Vue手脚架

使用vue -V测试是否安装成功

 

2. 在指定的位置创建项目文件名

 

澳门mgm线上娱乐3. Vue命令初始化Nuxt项目

 

4. 创建项目名

澳门mgm线上娱乐5. 进入项目,安装依赖

 

6. 启动项目

 

7. 在浏览器中访问: 或者

 

三、Nuxt目录结构

 

四、Nuxt个性化配置文件描述(nuxt.config.js)

 

 

五、端口配置

 

澳门mgm线上娱乐方式一: 在package.json文件中配置

  "config": {

    "nuxt": {

澳门mgm线上娱乐      "host": "127.0.0.1",

澳门mgm线上娱乐      "port": "9999"

    } 

澳门mgm线上娱乐  },

 

方式二: 在nuxt.config.js中配置

澳门mgm线上娱乐  server: {

    port: 8000, // 端口号

澳门mgm线上娱乐    host: '127.0.0.1', // 主机名

  }

 

六、全局CSS样式配置

  1. 创建重置样式表normalize.css文件

 

2.配置nuxt.config.js文件中css属性

 

澳门mgm线上娱乐创建的所有页面中就具有重置表的样式

 

 

七、路由

1. 页面之间跳转

原始方式:  <a href=”/”></a>

                <a href=”/news”></a>

澳门mgm线上娱乐            <a href=”/about”></a>

推荐方式:  <nuxt-link :to=”/”></nuxt-link>

            <nuxt-link :to=”/news”></nuxt-link>

<nuxt-link :to=”/about”></nuxt-link>

 

 

澳门mgm线上娱乐2. nuxt已经配置好了路由,无需再配置就可以直接使用

   比如:

Nuxt自动配置的路由如下:

 

3. 动态路由

   注意:定义带参数的动态路由,需要在文件中创建以_开头的vue文件或者文件目录

   比如:

   

   采用vue中router-link方式写法

   

   接收方式

   

 

 

4. 路由验证

   Nuxt提供了一个专门验证的路由的方法validate方法

   

 

 

八、过渡动效

1. 全局过渡效果设置

注意: 默认使用过渡效果名称: page

 

澳门mgm线上娱乐在assets/normalize.css文件中设置

 

澳门mgm线上娱乐然后在nuxt.config.js中css属性引用就可以让所有页面进入和离开都有过渡效果

 

澳门mgm线上娱乐2. 单个页面过渡动效设置

在assets/normalize.css文件中设置

 

在_id.vue页面中调用transtion属性

 

 

九、视图模板

1. 定义全局默认HTML视图模板,在全局目录中创建app.html文件

 

2. 页面布局视图模板

  A. 在layout/default.vue中定义默认的视图

    

澳门mgm线上娱乐  B. 自定义模板视图

澳门mgm线上娱乐1. 可以在layout中创建lgo.vue文件

2. 在page中其他组件文件中引用layout属性,值为lgo

  C. 错误页面

1. 通常在layout文件夹中创建一个error.vue页面,虽然他在layout中,但是我们应该把他当作页面,而不是视图模板,而且布局中不需要<nuxt />这个路由出口

 

D. 自定义头部信息

 

 

十、异步数据

注意: 由于asyncData方法是在组件初始化前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象

1. Nuxt提供了几种不同的方法来操作asyncData方法

A. promise ( 没有追求 )

B. async 和 await( 有追求 )

2. Prosmise

 

澳门mgm线上娱乐3. async 和 await

渲染页面:

#标签:Nuxt,VUE,SSR