# nuxt

文章目录

- 需要的环境
- 创建项目
- 路由
- - 路由的配置
  - - 一级路由的配置
    - 动态路由配置
    - 多级路由创建
  - 路由参数的传递
- 异步获取数据
- - 异步读取数据示例
- Nuxt中keep-alive的使用
- 跨域配置
- - 实际请求示例
  - 异步配置
- 自定义loading
- vuex的配置及使用
- - vuex的持久化 (cookies)
  - vuex的持久化之sessionStorage(单用这种也可以实现)
- element-ui 的配置使用
- 配置页面的头信息
- 静态资源的处理
- nuxt 项目部署

项目参考模板

需要的环境

node

vue-cli

create-nuxt-app // cnpm i create-nuxt-app -g

创建项目

npx create-nuxt-app demo01 //项目名不能有大写字母

路由

路由的配置

默认将layout下的default.vue 作为一级路由,page是具体的路由配置

一级路由的配置

在pages下新建一个user文件夹，文件夹下新建index.vue

等同于建立路由 /user

动态路由配置

在pages下新建一个user文件夹，文件夹下新建_id.vue

等同于建立路由 /user/:id

多级路由创建

在pages下新建一个admin文件夹，与admin文件夹同级新建admin.vue,在admin.vue中必须要有,再在admin文件夹下新建home文件夹，home文件夹下新建index.vue

等同于建立路由 /admin/home //但此时的admin.vue是一级路由组件

路由参数的传递

? 类的参数任何路由都可以传递

去用户登陆界面

在获取时

这是动态路由传参：{{$route.params.id}}

这是路由随便填写参：{{$route.query.username}}

异步获取数据

安装依赖

yarn add  @nuxtjs/axios

配置

在nuxt.config.js中

modules: [
    '@nuxtjs/axios'
  ],

异步读取数据示例

async asyncData({$axios}){   //必须在这儿解构
    let data=await $axios({
         url:
        "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=3&type=1&k=7904682",
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    })
    return {
      datalist:data.data.data.films     //datalist 在data中定义
    }
  },

Nuxt中keep-alive的使用

layouts/default.vue

<nuxt keep-alive :keep-alive-props="{include: includeArr }"/>
<script>
  export default {
    data() {
        return {
            includeArr: [
            'ServicerManageProjects',
            'DataReportData',
        ]
      }
    }
  }
</script>

include中放需要缓存页面的name，注意是组件的name，不是路由的name。所以在页面的export default中一定要写对应的name属性，如果没写的话就无法进行缓存了。

跨域配置

安装依赖

yarn add @nuxtjs/proxy

7.2在nuxt.config.js 中配置

axios:{
    proxy:true,   //开启跨域
    // prefix:"/api"   // 基础路径
  },

  proxy:{
    '/api/': {
      target: 'http://127.0.0.1:5000',
      changeOrigin:true,
      pathRewrite: {
        '^/api' : ''
      }
    }
  },

实际请求示例

//后端真实请求路径 http://127.0.0.1:5000/login

let data1=await $axios({
    url:"/api/login",
    method:"post",
    data:{
      username:"admin",
      password:"admin"
    }
  })

    return {
      datalist:data.data.data.films,
      userdata:data1.data.data
    }
  },

异步配置

在plugins下新建一个http.js

export default function ({ $axios, redirect, route, store }) {

    $axios.defaults.timeout = 5000;
    $axios.onRequest(config => {
        //请求拦截
        // config.headers.token = "123456"
        return config
})
    $axios.onResponse(res => {
        //返回拦截
        if (res.status !== 200) {
            console.log("request----err")
        }
        return res.data
    })
    //对错误请求的处理
    $axios.onError(err => {
        return err
    })
}

在nuxt.config.js中配置

plugins: [
    {
      src:'~/plugins/http',
      ssr:true    //开启后端渲染
    }
  ],

自定义loading

在nuxt.config.js中添加

在loading组件中写loading效果

vuex的配置及使用

vuex的持久化 (cookies)

安装依赖

yarn add cookie-universal-nuxt

配置

modules: [
    '@nuxtjs/axios',
    'cookie-universal-nuxt'
  ],

在登陆时保存状态 cooikies 长度<4000

async subLogin() {
      let data = await this.$axios({
        url: "/api/login",
        method: "post",
        data: {
          username: "admin",
          password: "admin",
        },
      });
      let userdata = data.data;        
        //将user  token信息存到cookies
        this.$cookies.set("token", data.token);
        //将user  token信息存到vuex
        this.$store.commit("settoken", data.token);

         //将user信息 存到vuex
        this.$store.commit("setuserdata", userdata);

      this.$router.push("/");
},

在store下的index.js中

export const actions = {
    // 这是cookie的勾子函数,在页面强制刷新时触发,context 是上下文
    nuxtServerInit(store, context) {
        let userdata = context.app.$cookies.get("userdata") || null
        store.commit("setUserData", userdata)
    }
}

在http.js中

export default function ({ $axios, redirect, route, store }) {
    $axios.defaults.timeout = 5000;
    $axios.onRequest(config => { 
        let url=route.path
        let arr=['/user/login','/user/register']
        if(arr.includes(url)){    // 不需要token
            return config
        }else{
            config.headers.token=store.state.token
            if(store.state.token){	// 请求时token存在
                return config 
            }
            // 没有token 被重定向到登陆页
            redirect("/user/login")
        }   
    })
    $axios.onResponse(res => {
        //返回拦截，对于特性的错误也要做路由的重定向
        if (res.status !== 200) {
            console.log("request----err") 
        }
        return res.data
    })
    //对错误请求的处理
    $axios.onError(err => {
        return err
    })
}

vuex的持久化之sessionStorage(单用这种也可以实现)

1.安装

yarn add vuex-persistedstate

2.配置

先在 plugins下新建 localStorage.js

import createPersistedState from 'vuex-persistedstate'
 export default ({store}) => {
  createPersistedState({
    storage: sessionStorage,
  })(store)}

在nuxt.plugins.js 中配置

plugins: [
    { src: '~/plugins/localStorage.js', ssr: false }
  ],

element-ui 的配置使用

安装依赖

yarn add element-ui

nuxt.config.js中配置

css: [
    "element-ui/lib/theme-chalk/index.css",
  ],
  plugins: [
    {
      src:"~/plugins/element-ui",
      ssr:true
    }
  ],
 build: {
    transpile:[/^element-ui/]
  }

在plugins下新建 element-ui.js 按需导入

import Vue from "vue"
import {Button,Form,FormItem,Input,Message} from "element-ui"
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message=Message

配置页面的头信息

在页面的data同级下head钩子函数中

head(){
   return {
     meta:[
      {
        name:"这是主页",content:"迎请，疫情"
      }
    ]
   }
  },

在根目录下创建app.html 可以合并信息

<!DOCTYPE html>
<html {{HTML_ATTRS}}>
<head {{HEAD_ATTRS}}>
    <meta name="jjjj">
    {{HEAD}}
</head>
<body {{BODY_ATTRS}}>
    {{APP}}
</body>
</html>

静态资源的处理

1.static下打包时不会优化绝对路径读取 / 代表static

2.assets下会被框架做打包优化(压缩) 可以以相对路径读取

3. ~ 表示项目的根目录 (~assets/)

4. 链接外部资源，直接在app.html 中引入即可

5. src资源的动态绑定使用

nuxt 项目部署

https://www.jianshu.com/p/bbe874c32f90

1.生成打包文件

npm run build

要先给自己设置跨域

2.在服务器启动服务端

要先打开对应的接口

3.将打包后的以下几个文件上传到服务器，重新安装依赖，npm start 即可

.nuxt

static

nuxt.config.js

package.json

( package-lock.json )

4.也可以使用pm2

pm2 start npm --name “nuxt_moban” – run start

如果无法启动需要安装

1、

npm install node-cmd --save;

2、根目录下新建startscript.js

const cmd=require(‘node-cmd’);

cmd.run(‘npm start’);

3、启动该脚本

pm2 start startscript.js

# nuxt

文章目录

需要的环境

创建项目

路由

路由的配置

一级路由的配置

动态路由配置

多级路由创建

路由参数的传递

异步获取数据

异步读取数据示例

Nuxt中keep-alive的使用

跨域配置

实际请求示例

异步配置

自定义loading

vuex的配置及使用

vuex的持久化 (cookies)

vuex的持久化之sessionStorage(单用这种也可以实现)

element-ui 的配置使用

配置页面的头信息

静态资源的处理

nuxt 项目部署

继续阅读

Java实习生面试总结

css 实现文字滚动展示

Python 元祖(Tuple) 集合(set) 常用方法总结

面向对象基础面向对象练习

微信小程序：wx.navigateTo从子页面跳回父页面，页面不刷新的问题

redux 基本使用

mongoose

input 和 button 禁用

路由传参

Java基础总结|| 一 ||

泛型（Java9）

excel和csvexcel 文件操作csv 读写操作

MySQL基础总结2

MySQL基础总结3 集合运算，联结，窗口函数

magin 负值