nuxt的使用

最新推荐文章于 2024-08-06 17:34:27 发布

路光.

最新推荐文章于 2024-08-06 17:34:27 发布

阅读量2.5k

点赞数 1

分类专栏： nuxt 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_41429765/article/details/120395033

版权

nuxt 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.首先创建项目运行命令

vue init nuxt-community/starter-template projectname

若执行命令报错，

请全局执行

npm install -g @vue/cli-init

正常执行命令创建项目之后，查看项目的package.json文件运行

npm install命令下载包

认识目录

.nuxt自动生成的

assets静态资源目录（放些less，sass，javaScript）

layouts用作布局的相当于全局父级，其中的vue页包含<nuxt>相当于将pages页面中的内容全部在此入口展示

middleware是放置中间件的

pages是写的页面全部放到这个里面

plugins放置js插件

static放置静态文件（img等）

store放置vuex

.editorconfig是vscode的默认规则

eslintrc.js 规范代码书写

nuxt.config.js是覆盖原来的配置，相当于配置默认vue项目的index.html

二.

nuxt设置引入全局css在nuxt.config.js

在pages新建的vue文件nuxt会自动分配路由，直接按路径访问即可

其中~波浪线符号是代表根目录

nuxt使用scss

npm install node-sass@4.14.1

npm install sass-loader@8.0.2

必须下载两个版本是适应的，如果版本不适用则会报错，以上两个版本是适用的

执行完成后即可在单页面中使用了

</style>

全局使用scss

首先下载

npm i @nuxtjs/style-resources

修改配置
修改nuxt.config.js文件，添加内容
这里配置，采用的是nuxt 2.0.0版本

modules: [
    '@nuxtjs/style-resources'
],
styleResources: {
    scss: [
        //把全局样式放到这里，同时把css节点中引用的scss删除
        '~assets/my-global.scss'
    ]
},

在使用nuxt的2.14.12及以上版本时，配置有不同

//主要就是这里改为了buildModules
buildModules: [
    '@nuxtjs/style-resources'
],
styleResources: {
    scss: [
        '@/assets/my-global.scss'
    ]
},

三.路由配置

1.路由基本用法

//news.vue
//路由使用nuxt-link标签包裹如果所跳转路由名称是index,则对应打开页面时pages下的index.vue
<li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
//如果想跳转路由名称为news则对应打开页面时pages下的news文件夹下的index.vue
//此处由于是传参所以name原来应为news现在加了个-id则是规定所传的params对象名为id
//若传多个参数可以对象的形式用JSON.stringify转成字符串传值
<li><nuxt-link :to="{name:'news-id',params:{id:123}}">new1</nuxt-link></li>

2.路由跳转页面验证，及默认设置为子路由页

（1）在news文件夹下新建一个index.vue,又新建了一个_id.vue页面，
_id.vue页面不可export default中name不能设置删掉

//当前页面是news文件夹下新建的一个index.vue 

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">new1</nuxt-link></li>
<li><nuxt-link :to="{name:'news-id-name',params:{id:'nice'}}">new2</nuxt-link> </li>

（2）在_id.vue必须删掉export default下的name否则会将路由子页面当成子组件来用，就会报错news文件夹下同时新建index.vue及_id.vue是命名规则加下滑线就是默认为index.vue页的子路由页，会根据index.vue传的参数不同通过_id.vue页显示不同结果

//在当前页_id页中作正则验证如果参数都是数字则进入
//当前页，并显示结果，否则进入nuxt.js的默认404页面

//_id.vue

<template>
    <div>
      <h2>News-content</h2>
      <p>NewsId{{$route.params.id}}</p>
      <ul>
        <li><a href="/">HOME</a></li>
      </ul>
    </div>
</template>

<script>
    export default {
      // name: "_id",
      //加校验如果路由参数中包含数字则返回true执行进入此子组件页面,否则会进入404页面
      validate({params}){
        return /^\d+$/.test(params.id);
      },

    }
</script>

3.nuxt.js的路由页在根目录下.nuxt文件夹下的router.js页中配置

三点一.路由动画

（1）路由动画默认配置写法

//normal.css
/*以下是全局页面切换路由渐隐渐显效果，
其中类名的方式enter-active,level-active及
-enter,level-active是固定的搭配写法，为什么不加page是因为page可以自定义*/
//意思是进入激活效果        离开激活效果
.page-enter-active,.page-level-active{
  transition: all 1s;
}
//进入触发效果    离开激活
.page-enter,.page-level-active{
  opacity: 0;
}

（2）路由动画自定义配置写法

https://myjson.com/

//normal.css
/*以下是test自定义路由动画配置写法效果是进入时字体由大到小，离开是字体由小到大*/

.test-enter-active, .test-leave-active{
  transition: all 1s;
  font-size: 12px;
}
.test-enter, .test-leave-active{
  opacity: 0;
  font-size: 40px;
}

当其他页面使用此自定义动画效果时需要在export default中的transition设置值为‘test’

四.nuxt模板及默认布局

1.模板

在根目录下新建一个app.html

<!DOCTYPE html>
<html lang="en">
<head>
  {{HEAD}} //固定写法
</head>
<body>
  <p>JSPang.com 技术胖博客</p> //在此处添加内容相当于在所有vue上方都会显示此内容
  {{APP}}//其中App位置显示的是所有vue页的内容
</body>
</html>

2.默认布局

在layouts文件中的index.vue设置默认布局

<nuxt/>标签表示所有.vue页的内容可以自定义所有vue页面的外部盒子

五.错误页面配置

1.在layout文件夹中新建error.vue

<template>
    <div>
      <h2 v-if="error.statusCode===404">404页面，你需要的页面没有找到</h2>
      <h2 v-else>500页面，服务器错误</h2>
    </div>
</template>

<script>
    export default {
      /*error是系统自带的值，可以获取网页状态*/
      props:['error']
    }
</script>

配置完后当访问当前域名下的地址无法访问就会自动进入error.vue中

六。个性meta标签设置

1.默认给某一个vue页设置meta或head内容

七。请求接口

<template>
  <div>
    <ul>
      <h2>姓名：{{info.name}}</h2>
      <h2>年龄：{{info.age}}</h2>
      <h2>{{info}}</h2>
    </ul>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
      data(){
        return{
          name:'Hello World'
        }
      },
      //将json值直接返回给当前方法，在html中可直接使用对象的值
      async asyncData(){
        let {data}=await axios.get('https://api.myjson.com/bins/7g5mb');
        return {info:data}

      }
    }
</script>