nuxt初体验--搭建篇（1）

前言

最近公司需要做一个新的官网，准备从0到1搭建一遍，里面可能还会涉及到对一些基础知识的个人理解，本着做记录的目的，希望能帮助自己也能帮助到大家，现在开始吧～

介绍

Nuxt.js是一个基于Vue.js的通用应用框架。

安装

方法一：使用官方脚手架

第一步：安装项目

$ npx create-nuxt-app <项目名>

它会让你选择一些内容

需要集成的服务器（koa,Express...），使用Nuxt默认服务器就选择None
喜欢的UI框架（Antd,ElementUI...），默认为None
喜欢的测试框架，默认无
选择想要的Nuxt模式（Universal/SPA），简单理解，对SEO要求比较高的话选择Universal；如果没有SEO需求，前后端分离的项目可以选择SPA
添加axios到项目中吗
添加eslit来检查和规范代码吗
添加prettier来格式化代码吗

第二步：进入项目所在文件夹，运行项目

$ cd <项目名>
$ npm run dev

方法二：从头开始新建项目

只需要一个目录和一个文件即可新建一个nuxt项目
第一步：创建项目文件夹

$ mkdir <项目名>
$ cd <项目名>

第二步：新建package.json文件
package.json文件用来设定运行项目的脚本以及记录后续安装的npm包

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

第三步：安装nuxt
进入刚刚创建的项目文件中，安装nuxt

$ npm install --save nuxt

第四步：创建pages目录

$ mkdir pages

创建第一个页面，pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目

$ npm run dev

补充知识点：Universal和SPA模式的差别

目录结构

资源目录（assets）

用来组织未编译的静态资源，如LESS、SASS、JS

对于不需要通过Webpack处理的静态资源文件，可以放在static目录中，更多内容

组件目录（components）

用于存放项目中的公共组件，这些组件不像页面组件中那样有asyncData方法的特性

布局目录（layouts）

用于存放项目中的布局组件，该目录在无额外配置的情况下，不能重命名，了解更多

中间件目录（middleware）

用于存放项目中的中间件（允许您定义一个自定义函数允许在一个页面或一组页面渲染之前）

// 自定义中间件 middleware/stats.js
import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

在全局使用

每个路由切换的时候都会调用一个中间件stats

// nuxt.config.js
module.exports = {
  router: {
    middleware: 'stats'
  }
}

在单个页面/布局组件中使用

在路由切换到当前页面时调用

// pages/index.vue 或者 layouts/default.vue

export default {
  middleware: 'stats'
}

页面目录（pages）

用于组织应用的路由及视图，Nuxt会根据文件名称生成对应的路由，该目录在无额外配置的情况下，不能重命名

插件目录（plugins）

用于组织那些需要在实例化之前运行的js插件或第三方库，比如axios、element-ui等，使用前需在nuxt.config.js中进行配置

需要注意的是，在任何Vue组件的生命周期内，只有beforeCreate和create这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

使用第三方模块

<template>
  <h1>{{ title }}</h1>
</template>

<script> import axios from 'axios'

  export default {
    async asyncData({ params }) {
      let { data } = await axios.get(`https://my-api/posts/${params.id}`)
      return { title: data.title }
    }
  } </script>

使用Vue插件

// 在plugins文件夹下新建vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

// 在nuxt.config.js中配置

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

全局注入

如果希望在整个应用使用某个函数或属性，可以将它们注入到Vue实例（客户端），context（服务端）或者Store（Vuex）

使用的时候，需要在方法前加上$，表示自定义的函数；如果需要限制插件只在客户端运行，在配置的时候加一个ssr: false就行

注入到客户端（Vue实例）

// 在plugins文件夹下新建vue-inject.js

import Vue from 'vue'

Vue.prototype.$myInjectedFunction = string =>
  console.log('This is an example', string)

// 在nuxt.config.js中配置

export default {
  plugins: ['~/plugins/vue-inject.js']
}

// 在组件中使用

export default {
  mounted() {
    this.$myInjectedFunction('test')
  }
}

注入到服务端（context）

// plugins/ctx-inject.js
export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.myInjectedFunction = string =>
    console.log('Okay, another function', string)
}

// 在nuxt.config.js中配置
export default {
  plugins: ['~/plugins/ctx-inject.js']
}

// 从context(例如在asyncData，fetch)中拿到注册的函数
export default {
  asyncData(context) {
    context.app.myInjectedFunction('ctx!')
  }
}

同时注入

如果想在客户端，服务端以及Vuex中同时注入，可以使用inject方法，如下

// plugins/combined-inject.js
export default ({ app }, inject) => {
  inject('myInjectedFunction', string => console.log('That was easy!', string))
}

// nuxt.config.js
export default {
  plugins: ['~/plugins/combined-inject.js']
}

// 在普通组件中使用
export default {
  mounted() {
    this.$myInjectedFunction('works in mounted')
  },
  asyncData(context) {
    context.app.$myInjectedFunction('works with context')
  }
}

// 在store中的js文件中使用
export const state = () => ({
  someValue: ''
})

export const mutations = {
  changeSomeValue(state, newValue) {
    this.$myInjectedFunction('accessible in mutations')
    state.someValue = newValue
  }
}

export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$myInjectedFunction('accessible in actions')
    const newValue = 'whatever'
    commit('changeSomeValue', newValue)
  }
}

静态文件目录（static）

在该目录下存放的静态文件，不会被webpack编译处理；服务器启动的时候，这些文件会映射到应用的根路径下

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />

Store目录（store）

用于组织Vuex的状态树，更多内容

nuxt.config.js文件

用于组织个性化配置，来覆盖默认配置