nuxt搭建项目介绍

前沿：去年首次使用nuxt框架搭建项目，一个是对于新知识的学习，一个是公司项目需要使用到该框架，任务需求。前期看了下api后，开始着手开发，在使用过程中有疑问再去api文档查找。现在是项目上线后的某一天，作为当事人再次回顾一下事件的整个过程，整理下需要记录在案的一些点，便于有个系统性的了解。

一、根据官网api的安装步骤，根据自己个人的框架喜好初始化一个新项目。

二、大致回顾下项目中常用的几个目录结构：

（1）、assets：资源目录。这个不用说大家都知道的存放项目静态资源文件（如：图片、公共样式等）

​

（2）、components ：组件目录。这个用vue的同僚们也都知道，用来存放项目公共组件的文件。

跟vue项目中一样，可以单独在某个文件中引入使用，也可以注册全局引入；

例如：下面这个组件：container.vue

​单个页面引入就不用在这啰嗦了，只稍稍说明下全局使用的，一般是在plugins(下面会讲到这个目录的使用)建一个文件夹如component.js专门用来引入注册components下面的组件为全局组件。

component.js

// 引入组件
import FContainer from '~/components/Container'

// 注册为全局组件
Vue.component('f-container', FContainer)

使用：

<f-container></f-container>

(3)、layouts：布局目录。这个目录可就重要了，你可以在这里自定义一个项目的布局文件例如:default.vue来定义整个项目中页面的一个布局，做一些公共操作。

error.vue 还可以在此目录下定制错误页面，相当于一个显示错误的组件。

它用v-if进行判断错误类型，需要注意的是这个错误时你需要在props里进行声明。