前言

话不多说，有关nuxt的社区建设还是亟待完善的，我也为新人入坑贡献一份力量吧。

nuxt搭建

这一块主要参照官方文档来就OK，这里附上地址：nuxt快速搭建官方教程，还是挺详细的，主要步骤如下：

运行 create-nuxt-app（官方提供的脚手架）
进行选择，可以在这里选上element ui，因为element如果后期手动引入会带来一些问题，所以不妨这里直接继承到项目中，可以更完美地进行兼容。
按照官方文档进行后，再进入pakage.json，直接run dev就可以了

项目结构

这里顺便把项目结构解释一下,完成上一步骤之后我们可以得到的目录结构如下：

assets：放一些未编译的静态资源
components：组织应用，可以视作page的组织部件（注意这些组件不会有asyncData方法的特性，这个在项目中经常会用到）
layouts：总体布局，如果是多页面项目会有多个背景layout，写在这里会自动编译进整个页面
middleware：中间件，一般用不到，但是可以用在注册登录的auth中（如果不用中间件需要重新写路由，之后再做一个demo用来演示）
pages：页面目录，基本上可视的浏览窗里看到的就是一个个page页面
plugins：插件目录，组织实例化钱需要运行的js插件，可以把通用的api或者需要在页面加载前统一处理的请求（js等）放在这。
static：静态文件，服务器启动时才被映射，我的话基本把图片放在这或者assets里
store：状态树，这里可以用来存放通用变量或者方法，当然还有更多配置功能，详情参考官方文档
nuxt.config.js文件：这里就是设置配置的地方，在加入什么新的需要特殊处理的插件时，需要在这里进行调整
package.json文件：这个文件里放的基本上是和编译相关的，这块可以去看npm或者yarn的说明。

vuetify引入

vuetify是一个精美的组件库，里面有很多方便快速制作网页的组件，之后想出几篇blog进行源码分析，因为组件中的一些小细节做得非常有意思且值得学习。拿v-btn来说，和一般的组件库不一样的是它具有响应点focus，点击按钮的不同位置可以看到点击相应的不同扩散处。

在nuxt中引入vuetify，它本身支持也很好，这里看官方文档：nuxt引入vuetify官方文档

里面的步骤很清楚，包括要更改的配置也写出来了，按步骤走完后，重新编译，然后测试 <v-btn>button</v-btn>有没有相应的提示就知道有没有安装成功了。

axios引入

在nuxt手脚架里可以自动引入axois，但是配置上好像存在一些问题，由于api接口的需要，我重写了axios。

import Cookies from 'js-cookie'

const baseURL = '这里放api前缀';

function getApiURL (path, baseURL) {
  return path.substring(baseURL.length)
}

//nuxt.config.js里更改配置
plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
  ],

这样就没问题了

页面切分

之后做一个简单的页面切分吧，这里不得不提vuetify的栅格系统，可以很方便地自适应浏览器，并且调整相应位置以及居中元素。

vuetify栅格

Vuetify 附带了一个使用 flex-box 构建的 12 点栅格系统。网格用于在应用程序的内容中创建特定布局。其中包含 5 种媒体断点，分别用于定位特定屏幕大小或方向：xs, sm, md, lg 和 xl。

Device	code	Types	Range
Extra small	xs	small to large handset	< 600px
Small	sm	small to medium tablet	600px > < 960px
Medium	md	large tablet to laptop	960px > < 1264px*
large	lg	desktop	1264px* > < 1904px*
Extra large	xl	4k and ultra-wides	> 1904px*

所以这些都是特定于不同屏幕的标准而已

v-row 是 v-col 的包装组件。它利用 flex 属性来控制内部列的布局和流。它使用的标准边距是 24px。这可以减少 dense 属性或完全移除 no-gutters

详细应用可以参考vuetify中的实战场，这里给出一个demo

如果我们要把页面按1:2划分，可以这样写：

<v-container class="grey lighten-5" fluid>
  <v-row>
    <v-col
      cols="12"
      md="4"
    >
      <v-card
        class="pa-2"
        tile
        height="650px"
      >
      1
      </v-card>
    </v-col>
    <v-col
      cols="12"
      md="8"
    >
      <v-card
        class="pa-2"
        tile
        height="650px"
      >
      2
      </v-card>
    </v-col>
  </v-row>
</v-container>

页面效果如下：

nuxt项目搭建+element+vuetify+axios+页面切分

前言