Vue----Nuxt.js--学习

官网：https://zh.nuxtjs.org/guide/installation

1.安装

npx create-nuxt-app <项目名>

2.Hello World

image.png

通过localhost:3000/hello/即可访问

修改项目ip、端口号配置

image.png

修改nuxt.config.js配置文件：https://zh.nuxtjs.org/guide/configuration

3.路由：

[https://zh.nuxtjs.org/guide/routing](https://zh.nuxtjs.org/guide/routing)

 <h1><nuxt-link :to="{name:'hello'}">HELLO</nuxt-link></h1>

路由传参

  <h1><nuxt-link :to="{name:'hello',params:{id:'110001'}}">HELLO</nuxt-link></h1>
 <h2>{{$route.params.id}}</h2>

// 路由传参---参数校验
   validate({params}){
       return /[0-9]+/.test(params.id)
   }
如果校验失败会跳转到404页面

使用axios异步请求数据

1.async await
  // 异步请求数据
   async asyncData ({ params }) {
    let { data } = await axios.get("https://api.myjson.com/bins/jhvlq")
    return { datas:data.data }
  }

2.promise对象
 asyncData ({params}) {
  return  axios.get("https://api.myjson.com/bins/jhvlq").then((res)=>{
       return {datas:res.data.data}
   })

3.回调函数
  asyncData ({ params }, callback) {
    axios.get("https://api.myjson.com/bins/jhvlq")
    .then((res) => {
      callback(null, { datas: res.data.data })
    })
  }

打包：

npm run generate