关于vue.js:nuxtjs快速上手nuxt2

提醒：本篇文章是博主观看 b 站 up 主前端 aka 老师视频学习整顿的文章
视频指路：《CMS 全栈我的项目》系列九：Nuxt+ElementUI
nuxtjs 官网(nuxt2)：NuxtJS

提醒：本篇文章为 nuxt2：

本篇文章能够带你疾速搭建一个简略的 Nuxt.js 我的项目，Nuxt.js 是基于 Vue.js 的通用利用框架，Nuxt.js 预设了利用 Vue.js 开发 服务端渲染(SSR) 的利用所须要的各种配置，文章简要叙述 Nuxt.js 的根底性能，能够疾速上手 Nuxt！

提醒：以下是本篇文章正文内容，上面案例可供参考

运行 create-nuxt-app

确保装置了 npx (npx 在 NPM 版本 5.2.0 默认装置了):
npx create-nuxt-app < 我的项目名 >
或者用 yarn：yarn create nuxt-app < 我的项目名 >

开发中常常会遇到端口被占用或者指定 IP 的状况。咱们须要在根目录下的 package.json 里对 config 项进行配置。比方当初咱们想把 IP 配置成 127.0.0.1，端口设置 8080。

{
    ...,
    "config": {
        "nuxt": {
          "host": "127.0.0.1",
          "port": "8080"
        }
        // 或者
        "nuxt": {
          "host": "0.0.0.0",
          "port": "80"
        }
    }
}

装置 less 和指定版本的 less-loader

npm install less less-loader@7.0.0 --save-dev

全局款式文件

在 static 目录中创立 base.less 文件，用来写全局款式。而后关上 nuxt.config.js 并找到 css：

css: [
 'element-ui/lib/theme-chalk/index.css',
     '~/static/base.less'    // 全局款式增加在此处
],

组件内款式

<style scoped lang="less">
@bgColor: #f00;
.el-container {
  width: 100%;
  height: 100%;

  .el-main {
 color: @bgColor;
 height: 100%;
 padding: 0;
  }
}
</style>

关上 reset-css 的 npm 网站，轻易拿一条链接：

/* http://meyerweb.com/eric/tools/css/reset/
v5.0.1 | 20191019
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {display: block;}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {display: none;}
body {line-height: 1;}
menu, ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

粘贴代码到 reset.css，放到 static 目录下，并在 nuxt.config.js 引入：

head: {
  ...,
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
  {rel: 'stylesheet', type: 'text/css', href: '/reset.css'}    // 引入
]
 },

同样，你也能够放到该文件中的 css 对象里，以数组项模式存在。

Nux t 能够在 asyncData 和created中做 axios 申请。但在 created 中做申请，渲染进去的数据不会呈现在 html 中，导致 无奈实现 SEO优化，而应用 asyncData 做申请，则 html 会被渲染进去，从而 实现 SSR。 不是异步 
asyncData中 不能获取 vue 的 this，所以必须return，template 中可间接花括号调用，与应用 data 数据统一

// 页面中应用 asyncData 能够实现 SSR 渲染，但赋值是间接 return {data}
async asyncData() {let result = await BannerApi();
   if (result.errCode === 0) {
     let banner = result.data;
     return {banner};
   }
 },

export default {asyncData({ params,query}) {return axios.get(`https://my-api/posts/${params.id}`).then(res => {return { title: res.data.title}
    })
  }
}

在 page 页面中新建 vue 组件，路由  主动生成  同文件名统一的路由

能够通过 vue-router 的子路由创立 Nuxt.js 利用的嵌套路由。
创立内嵌子路由，你须要增加一个 Vue 文件，同时增加一个与该文件同名的目录用来寄存子视图组件。
Warning: 别忘了在父组件(.vue 文件) 内减少 <nuxt-child/> 用于显示子视图内容。

装置 proxy
```
npm i @nuxtjs/proxy -D
```

在 nuxt.config.js 中增加：

module.exports = {
  ...,
  modules: [
 '@nuxtjs/axios',
 '@nuxtjs/proxy'
  ],
  axios: {
 proxy: true,
 prefix: '/',
 credentials: true
  },
  proxy: {
 '/api/': {
   target: 'http://127.0.0.1:9000/web', // 指标服务器 ip
   pathRewrite: {
     '^/api/': '/',
     changeOrigin: true
   }
 }
  }
}

axios 的 baseURL 的话应用 /api 即可

通过 nuxt.config.js 设置，在 nuxt.config.js 文件增加上面的配置。redirect 示意重定向的路由。

router: {extendRoutes(routes, resolve) {
      routes.push({
        path: '/',
        redirect: '/film'
      })
    }
  }

通过中间件文件，在目录中的 middleware 增加一个名为：redirect.js 的文件

在 redirect.js 中写入以下代码，其中 path 和 redirect 的路由本人定义。

export default function ({
  isHMR,
  app,
  store,
  route,
  params,
  error,
  redirect,
}) {if (isHMR) return; // 用来判断热更新
  // 页面均放在_lang 文件夹下，即 lang 为动静路由参数;
  /* if (!params.lang) { // 此写法会呈现路由重定向次数过多的问题；return redirect('/' + defaultLocale + '' + route.fullPath)} */
  if (route.fullPath == "/") {return redirect("/home");
  }
  if (route.fullPath == '/vue') {return redirect('/vue/basics')
  }
}

最初须要在 nuxt.config.js 文件中增加
```
router: {middleware: 'redirect'}
```

在 plugins 目录上面创立一个 xxx.js

import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs' // 通知 Vue 要应用插件 vue-highlightjs
import 'highlight.js/styles/atom-one-dark.css'

Vue.use(VueHighlightJS)

在 nuxt.config.js 中配置：

export default {plugins: ['~/plugins/xxx']
}

提醒：这里对文章进行总结：

例如：以上就是明天要讲的 Nuxtjs 内容，本文只是简略介绍了 Nuxtjs 的一些应用，能够让你疾速上手 Nuxt，当然 Nuxt 里边还有好多弱小的性能，大家能够去官网再具体看看。

关于vue.js:nuxtjs快速上手nuxt2

nuxtjs 疾速上手(nuxt2)

前言

一、疾速生成 nuxt 我的项目

二、nuxtjs 配置 IP 与端口

三、在 nuxt 中应用 less

四、nuxtjs 中我的项目革除默认款式

五、nuxtjs 中应用 asyncData 实现 SSR

六、路由

6.1 动静嵌套子路由

七、Nuxt 解决跨域

八、Nuxt.js 重定向路由形式

8.1 形式 1

8.2 形式 2

九、nuxt 中应用 vue 插件

总结