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！

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

一、疾速生成nuxt我的项目

运行 create-nuxt-app

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

二、nuxtjs配置IP与端口

开发中常常会遇到端口被占用或者指定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"        }    }}

三、在nuxt中应用less

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

    npm install less less-loader@7.0.0 --save-dev
  2. 全局款式文件

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

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

  4. 组件内款式

    <style scoped lang="less">@bgColor: #f00;.el-container {  width: 100%;  height: 100%;  .el-main { color: @bgColor; height: 100%; padding: 0;  }}</style>

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

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

    /* http://meyerweb.com/eric/tools/css/reset/v5.0.1 | 20191019License: 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;}

  2. 粘贴代码到 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' }    // 引入] },

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

五、nuxtjs中应用asyncData实现SSR

Nuxt能够在asyncData和created中做axios申请。但在created中做申请，渲染进去的数据不会呈现在html中，导致无奈实现SEO优化，而应用asyncData做申请，则html会被渲染进去，从而实现SSR。<font color="#f00">不是异步</font>
asyncData中<font color="#f00">不能获取</font>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组件，路由 <font color="#f00">主动生成</font> 同文件名统一的路由

6.1 动静嵌套子路由

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

七、Nuxt解决跨域

  1. 装置 proxy

    npm i @nuxtjs/proxy -D

  2. 在 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   } }  }}
  3. axios 的 baseURL 的话应用 /api 即可

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

8.1 形式1

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

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

8.2 形式2

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

  1. 在 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')  }}

  2. 最初须要在 nuxt.config.js 文件中增加

    router: {middleware: 'redirect'}

九、nuxt中应用vue插件

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

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

  2. 在nuxt.config.js中配置：

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

总结

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

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