乐趣区

关于前端:nuxt初体验搭建篇1

前言

最近公司须要做一个新的官网,筹备从 0 到 1 搭建一遍,外面可能还会波及到对一些基础知识的集体了解,本着做记录的目标,心愿能帮忙本人也能帮忙到大家,当初开始吧~

介绍

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

装置

办法一:应用官网脚手架

第一步:装置我的项目

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

它会让你抉择一些内容

  1. 须要集成的服务器(koa,Express…),应用 Nuxt 默认服务器就抉择 None
  2. 喜爱的 UI 框架(Antd,ElementUI…),默认为 None
  3. 喜爱的测试框架,默认无
  4. 抉择想要的 Nuxt 模式(Universal/SPA),简略了解,对 SEO 要求比拟高的话抉择 Universal;如果没有 SEO 需要,前后端拆散的我的项目能够抉择 SPA
  5. 增加 axios 到我的项目中吗
  6. 增加 eslit 来检查和标准代码吗
  7. 增加 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 文件

用于组织个性化配置,来笼罩默认配置

退出移动版