nuxt | Yo.

npx的使用

Code

举个列子：npm i create-react-app -g
		create-react-app myapp
使用npx  npx create-react-app myapp

类似与简化操作，创建一个myapp 默认把脚手架安装成功。npm 5.2.0默认安装了npx

nuxt安装

Code

npx create-nuxt-app hello-nuxt

安装完成之后，有些配置项。根据自己的需要安装所需要的配置文件

nuxt启动

Code

npm run dev

nuxt配置

css配置

安装 node-sass和load-sass（需要注意的是npm安装node-sass会有问题，需要切换到淘宝镜像源来进行单独安装）
到assets文件中新建css文件夹和style.css
再nuxt.config.js中修改css的配置为:‘@/assets/css/style.sass’
sass文件不能换行写，需要写在同一行之中

nuxt路由

动态路由

传递参数：在页面中使用路由，使用nuxt-link标签，里面的to属性是路径

Code

<nuxt-link :to="'/detail/' + item.id">传递id为1</nuxt-link>//id为需要传送的参数

接受参数：detail文件下建立一个_id来接受传递的参数（_id为下划线+参数名称才能接受到参数）

_id.vue中

Code

<div>{{$route.params.id}}</div>

嵌套路由

使用嵌套路由，需要在创建一个和文件夹同名的vue文件（在根路径中）在文件夹中是要嵌套的子路由

根路由中的user文件

Code

<template>
  <div>
    <h1>用户列表</h1>
    <nuxt-link to="/user/">嵌套首页</nuxt-link>
    <nuxt-link to="/user/profile">嵌套详情页</nuxt-link>
    //下面一句话相当于路由转发，千万不要忘记
    <nuxt />
  </div>
</template>

文件夹中的子路由

Code

<template>
  <div>
    <h1>嵌套页面-主页</h1>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>

</style>

Code

<template>
  <div>
    <h1>嵌套页面-个人详情页</h1>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>

</style>

路由切换的动态效果

Code

//终点
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
//起点
.page-enter, .page-leave-active {
  opacity: 0;
}

nuxt处理静态文件

assets文件下的

该文件下的文件会被webpack所处理，可转换成base64或其他小一点的loader

static文件下的

该文件夹下的资源文件不会被webpack所处理，像一些大的文件（background）之类的可以放在static之中

nuxt请求异步数据

json文件放在了static中的新建data文件夹下

Code

//获取json文件可使用axios，或者fetch等，静态资源文件请求加上/data（static下的文件夹名）/json文件名
async asyncData(){
    const res = await axios.get('/data/test.json')
    return {
      detail: res.data
    }
  }