avatar

Catalog
nuxt

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
}
}
Author: Yo
Link: https://powerlrl.gitee.io/2020/02/27/前端/笔记/nuxt/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 谢谢你请我吃糖果
    谢谢你请我吃糖果

Comment