nuxtjs 开发与实践

安装与目录

安装 npx create-nuxt-app <项目名>

- assets            用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
- components        用于组织应用的 Vue.js 组件
- layouts           用于组织应用的布局组件
- middleware        用于存放应用的中间件
- pages             用于组织应用的路由及视图
- plugins           用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
- static            用于存放应用的静态文件，此类文件不会被 Webpack 编译处理
- store             用于组织应用的 Vuex 状态树 文件
- nuxt.config.js    用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置
- package.json      用于描述应用的依赖关系和对外暴露的脚本接口

路由

// 方法以一
`<nuxt-link :to="{path:'/about',query:{index:id}}" target="_blank" ><nuxt-link>`
//  地址栏显示：loaclhost:3000/about/id
//  接收地址栏参数：this.$route.query.index

// 方法二
` <nuxt-link target="_blank" :to="{name: 'log-id', params:{id: n.id,key:value}}"></nuxt-link>`
// 地址栏显示：`loaclhost:3000/about/id`
// 接收：async asyncData ({ params }) { //  params.id 就是我们传进来的值 }
// 或者 created () { this.$route.params.xxx }`

方法

// 方法一，接收参数用 $route.params.id，刷新页面参数丢失
getDescribe(id) {
  // 直接调用$router.push 实现携带参数的跳转
  this.$router.push({
    path: `/describe/${id}`,
  })
}
// 方法二，接收参数用 $route.query.id，刷新页面参数不会丢失
this.$router.push({
  path: '/describe',
  query: {
    id: id
  }
})

asyncData

  • 注意的是 info 不需要在 data 定义，可以直接在模板使用
  • asyncData 只能在 page 目录下使用，不能再 components 目录下使用

参考文档

nuxtjs 中文官网 nuxtjs-TS nuxtjs/axios