简单认识一下Nuxt项目结构以及路由的基本用法

我们在基于Nuxt框架创建ssr渲染的vue项目中创建了一个Nuxt项目 而这个项目结构和vue项目有所差异
下面 我们一起看一下项目结构

components文件夹 主要用于存放全局的公共组件 组件的写法和vue是一样的
pages 用于存放当前页面 和 当前页面所需要的一些组件
plugins 主要就放了一些插件的引入 例如 我们这里的element ui引入

static 这里 我们用来放一些项目的静态资源
store 你如果想用vuex就在这里用

然后Nuxt项目中使用路由是更简单的 我们直接在pages目录下创建vue文件 他就会自动帮我们生成路由

例如 我们这里 在家在 pages目录下新建一个 engineering.vue 文件 参考代码如下

<template>
  <div>工程界面</div>
</template>

<script>
export default {
  name: 'EngineeringPage'
}
</script>

<style>
</style>

然后 我们启动项目

我们直接在浏览器中访问 http://localhost:3000/engineering

我们的界面就自动加载出来了

而对应 我们pages下面的index组件对应的就是 / 路由