天天看点
返回

Nuxt.js初探

Nuxt.js初探
在开始之前请大家考虑一个问题，CSR和SSR有什么区别？

Nuxt前言

这篇文章主要介绍

Nuxt

 的一些使用方法，

Nuxt.comfig.js

 文件配置，从Nuxt是什么到打包部署的一个基础流程笔记，由于【赵花花】水平能力有限，如有不正确之处，望理解并指出。另外精力有限，仅仅是打通一些常用的需求，并没有提供实际完整项目，以及一些项目业务中的公共模块,请大家谅解。

Nuxt.js 官网

Nuxt2

Nuxt.js初探

Nuxt3

Nuxt.js初探

Nuxt.js 是什么？

根据上面

Nuxt 2.x

和

Nuxt 3.x

官网介绍，个人理解大体意思是：基于

Vue.js

的

服务端渲染（SSR）

通用应用基础框架，跟Vue一样主要关注前端层面的UI渲染。如果同学你有Vue基础，那么上手是非常快速的，基本没有任何难度。

如果同学你对后端服务有一定的了解，那就太好了。

Nuxt.js有什么优势？

现在

Vue.js

，

React.js

大多数用于

单页面

（SPA）应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病：

  1. 单页面应用在访问时会将所有的文件进行加载（可以考虑懒加载，按需加载）。
  2. 首屏访问时，从打开打开网址到界面展现需要等待一段时间，界面不会有任何东西，也就是常说的

    白屏

     ，这就造成给用户的体验很不好。
  3. 另外一点是总所周知的

    SEO

     相关的问题。

Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，又有Vue基础，那么Nuxt.js就再合适不过了。

同类型还有哪些框架？

  1. Next.js
  2. Nuxt.js

Nuxt.js 的生命周期

validate => asyncData => fetch => head

创建第一个Nuxt项目

配置Port（端口号）和 Host（地址）

  1. package.json 中的配置
  2. Nuxt.config.js中的配置

环境变量配置

  1. 下载依赖 
    npm install cross-env
或者
yarn add cross-env
  2. 根目录创建env.js 
    module.exports = {
    dev: {
        Desc: '开发环境',
        API: '',
    },
    product: {
        Desc: '生产环境',
        API: '',
    },
}
  3. package.json 文件配置 
    "scripts": {
    "dev": "cross-env MODE=dev nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

配置ICO

在nuxt.cnfig.js配置文件中的head中添加对应的配置，相关配置可以前往Vue Meta，如下：

head: {
    link: [
      // 此处为设置引入ico, 默认指向根目录下static文件
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

配置路由动画

Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。

配置全局样式

  1. 根目录下创建css文件夹，再创建main.css文件

  2. nuxt.config.js

     文件中配置 
css: [
    '@/CSS/main.css'
  ],

配置less

  1. 下载

    less

     ,

    less-loader
  2. 如下就能够使用了 
<style token string">"less" scoped>

</style>

引入Element-ui

具体使用哪种UI框架，根据自己的喜好以及业务需求来就行，没有特别的规定说明。

  1. 下载element-ui依赖 
    npm install element-ui

或

yarn add element-ui
  2. 项目根目录下创建

    plugins

    文件夹

    这里之所以要创建

    plugins

     文件夹是因为

    nuxt.config.js

     中的配置项要一一对应，nuxt会自动去查找匹配文件夹，否则可能出现找不到，运行失败的情况。
    Nuxt.js初探
  3. plugins文件夹下创建element-ui文件夹及对应的js/ts文件，并引入element-ui，使用方式同vue中使用一致。 
    import Vue from "vue";
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)
  4. nuxt.config.js 中的plugins中引入创建的element-ui文件 
    plugins: [
    {
      src: '@/plugins/element-ui/element-ui', ssr: true
    },
   ]

自定义配置Layout

在创建的pages目录下创建页面，与创建Vue基本一致，但是也有一些特别之处。此处就多了一个属性layout，这个属性就是指定你当前使用那个布局方式，如果不设置就使用默认配置。

name: "LoginPage",
  layout: "loginLayout",  // loginLayout 是自定义创建的文件名称，这个文件处于根目录layouts文件夹下
  data() {
    return {
      pageName: "登陆页面",
      form: {
        name: "",
        pwd: "",
        safecode: "",
      },
      codeImgUrl: "",
    };
  },

loginLayout文件内容

<template>
	<!-- 此处的 <nuxt/> 与vue中的 <router-view></router-view> 和 react 中的 {children} 有相同之处 -->
    <nuxt/>
</template>

配置全局默认Layout

与上面自定义配置layout一样的方式，只不过是另外一个文件，文件名称只能是

default.vue
  1. 项目根目录下创建Layouts文件夹
  2. Layouts 文件夹下创建default.vue文件作为全局默认布局文件
  3. 具体使用页面配置参数

    layout: 'default'

    注意：此处的

    layout

     对应的值

    default

     为

    Layouts

     文件夹下具体的文件名名称

单页面自定义layou

使用方式与

配置全局layout一致

，唯一区别是

与具体页面中的layout值不一样

。

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由，官方建议使用 标签。

官方路由

普通路由跳转 

<nuxt-link to="/login">
 <el-button>跳转按钮</el-button>
</nuxt-link>

设置初始默认路由

  • 利用中间件

    1.根目录创建中间件文件夹

    2. 创建中间文件xxx.js或xxx.ts

    export default function (context) {
    const { redirect, isHMR, app, store, route, params, error } = context;
    // console.log('中间件：', isHMR,route,params)

    if (route.fullPath === '/') {
        return redirect('/Login')
    }
}
    1. nuxt.config.js配置 
    router: {
	middleware: ['redirect_to_login'],  // 路由中间件
}
  • nuxt.config.js单独配置 
    router: {
    extendRoutes(routes, resolve) {  // 扩展路由
      routes.push({
        path: '/',
        redirect: '/Login'
      })
    }
  },

设置动态路由及参数校验

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的

以下划线作为前缀的 Vue 文件 或 目录

。

Nuxt.js初探

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

validate(context) {
    // 动态路由校验
    return true;
  },
如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

设置嵌套路由

路由传参，组件传参 与vue中的使用方式基本一致

自定义初始页

配置全局error (404) 页面

  1. 在根目录下的plugins文件夹下创建xxx.js文件 
    export default (context) => {
    const { route, redirect } = context;
    const { matched } = route;
    console.log('全局路由拦截器：',context,route)
    if (matched.length === 0) {
        redirect('/error')
    }
}
  2. 在nuxt.config.js中进行配置 
    plugins: [
   // 此处为单独配置全局路由
    {
      src: '@/plugins/router.global.interceptor'
    }
  ],

组件懒加载

Compnents 下组件分类及使用

如果页面中要使用components目录下的组件，则不需要像vue中进行手动引入，只需要将对应的文件名称拷贝在页面中使用即可。例如：

  1. components 目录下创建Header.vue文件。
  2. 在layouts目录下的default.vue中间中使用。 
    <template>
	<!-- 与vue2.x版本一致，依旧需要一个根节点 -->
	<div>
		<Header/>
		...
	</div>
</template>

Vuex

引入Axios并配置代理

  1. 下载依赖文件 
    npm install axios
或
yarn add axios

  2. Nuxt.config.js

     中代理配置 
    axios: {
    proxy: true,  // 开启代理
    prefix: '/api' // 配置请求接口前缀
  },

  proxy: {
    '/api': {
      target: 'http://10.170.224.96:18103',  // 代理地址
      pathRewrite: {  // 前缀替换或置空
        '^/api': ''
      },
      changeOrigin: true,  // 发送请求头中host会设置成target
    }
  },
  3. 具体组件中使用 
    methods: {
	// 跟平常在vue中调用基本一致
    async getCaptchaImageFn() {
      const resData = await this.$axios.get("/captchaImage11");
      
    },
}

Axios增加拦截器

  1. 根目录plugins

     文件夹下创建axios拦截器文件（xxxx.js
  2. 拦截器中具体配置（配置不全，自行补全） 
    import {Message} from 'element-ui'

// 定义code码对应的信息
const errMsgToCodeObj = {

}

export default (context) => {
    const {store, $axios, redirect} = context;
    // 可以打印一下具体输出了什么内容
    // console.log(22222222, context)
    // console.log(22222222, store, store.state)
    // console.log(22222222, JSON.stringify($axios))
    // console.log(22222222, redirect)

    //  请求拦截器
    $axios.onRequest(config => {
        // console.log('请求拦截器::', config);
        const Token = store.state.Token;
        if (config.url === '/captchaImage') {
            // 验证码不需要无权限
            return config;
        } else if (Token && config.url !== '/captchaImage') {
            // 除开获取验证码以外都要上送Token标识
            config.headers.bbb = Token;
            return config;
        } else {
            // 以上都不是则返回登陆页面
            redirect('/login');
            return config;
        }
    })


    //  响应拦截器
    $axios.onResponse(config => {
        // console.log('响应拦截器::', config);
        const {data:{code, data, message, success}, headers, request, status, statusText} = config;
        if (status !== 200) {
            Message({
                message,
                type: 'error',
            })
        } else {
            return config.data;
        }
    })


    // 错误拦截器
    $axios.onError(config => {
        const {response: {data:{message,error},status}} = config;
        // console.log(111111111, config,error,errMsgToCodeObj[status]);
        switch(status.toString()){
            case '404':
                Message({
                    message: error,
                    type: 'error'
                })
                break;
        }

        return config
    })
}
  3. nuxt.config.js中进行配置 
    plugins: [    {
      src: '@/plugins/axios.Interceptor'
    },
  ],

CSR（客户端渲染）和 SSR（服务端渲染）的区别

CSR缺点：

  1. 初次加载存在白屏问题
  2. 不方便SEO
  3. 客户端压力大

SSR特点：

  1. 不会出现白屏问题，响应时间快（这个跟网络也有一定的关系，这里讨论的是正常网络的情况下）
  2. 减少资源文件加载次数
  3. 便于SEO，爬虫可以爬取数据

SSR缺点：

  1. 服务器压力增加，增加CPU和内存资源占用
  2. 学习成本增加

其他扩展

  1. 引入表单验证

    validator.js
  2. i18国际化
  3. 动画效果

    Animate.css
  4. 引入日期格式化插件

    day.js

     或

    moment.js
  5. 样式深层次穿透
ssr vue.js 前端 javascript
上一篇: UDP协议：因性善而简单，难免碰到“城会玩”
下一篇: git提交文件篇添加文件：提交文件：推送到远程仓库：

继续阅读