[Nuxt.js]Nuxt.js基础

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

DaftJayee

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

阅读量539

点赞数

分类专栏： Nuxt.js

本文链接：https://blog.csdn.net/qq_43540219/article/details/108281424

版权

Nuxt.js支持：

Nuxt.js工作流：

在这里插入图片描述

Nuxt.js安装：

vue init nuxt-community/koa-template 项目名

这个是集成了koa-tempalte的nuxt.js
在这里插入图片描述

也可以这么安装(nuxt2.0官方的脚手架)：
先全局安装npx

npm install -g npx

再执行命令

npx create-nuxt-app project-name

注意要指定版本为2.0.0，否则可能没有server framework选项
在这里插入图片描述

安装好后执行：

npm run dev

如果有报错参考：
1.https://blog.csdn.net/weixin_42614080/article/details/105613214
2.https://blog.csdn.net/qq_40571631/article/details/103285331
成功启动则如下所示：
在这里插入图片描述
访问localhost:3000看到如下即表示成功

Nuxt.js目录

在这里插入图片描述

安装好的Nuxt.js不会一开始就有store目录，需要我们自己创建，一旦创建了store目录，Nuxt.js就会自动为我们配置vuex，非常的方便，“创建即配置”。
当我们在pages中创建了一个页面，比如search.vue
在这里插入图片描述

<template>
  <section class="container">
    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
    <h1 class="title">
      Search.Vue
    </h1>
  </section>
</template>

<style scoped>
.title
{
   
  margin: 50px 0;
}
</style>

此时我们去浏览器访问localhost:3000/search即可访问到这个页面，nuxt.js自动配置了和文件名一致的路由，“创建即配置”。
在这里插入图片描述
但是我们发现，每个页面底下都有一部分（图示红框标出的部分）并不是我们在对应的页面文件中编写的内容，这一部分其实是写在layouts目录下的

default.vue是在你没有配置声明layout模板的时候所有页面都默认用default.vue作为模板，当然模板中也可以引入组件
在这里插入图片描述

顺便一提，这个<nuxt/>组件也就相当于原版vue中的<router-view/>（如果要调用组件必须要加入这个组件，这个标签表示路由匹配到的组件显示的位置），那么还有<nuxt-link/>组件，也相当于<route