使用Nuxt
Nuxt.js文檔：https://zh.nuxtjs.org/guide/
開始
初始化Nuxt項目
npx create-nuxt-app <項目名>
// or
yarn create nuxt-app <項目名>
運行
npm run dev
路由
基礎路由
Nuxt.js依據(jù) pages 目錄結構自動生成 vue-router 模塊的路由配置膊升。
舉例悼做， pages 如下：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么皆串，Nuxt.js 自動生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
路由傳參
由于在Nuxt.js中殷费，不需要配置 vue-router 嘹屯，路由配置完全依賴 pages 目錄的結構攻询。所以傳參時也不例外。
在 vue-router 中州弟，通過 path: '/route/:param' 定義參數(shù)钧栖，而在Nuxt.js中，通過 _ 為前綴命名的Vue文件或目錄婆翔。
通過 $route.params.參數(shù)名 取到參數(shù)值拯杠。
layout
在項目中，通常有一些組件啃奴，可以被多個頁面復用潭陪，如 header、footer最蕾、nav 等依溯，這些組件可以共同組成一個布局。
在Nuxt項目結構中瘟则，有 /layouts 文件夾誓沸，在這個文件夾中寫布局文件。通常是引入 /components 里的組件壹粟，再加上 <nuxt />拜隧。
舉例：
<template>
<div class="mLayout">
<m-header />
<!-- 這個是“坑”宿百，使用了這個布局文件的頁面生成的內容，將出現(xiàn)在下面的這個“坑”里面 -->
<nuxt />
</div>
</template>
<script>
// 需要注意的一個小細節(jié) 在Nuxt項目中 ~ 代表根目錄
import mHeader from '~/components/mHeader.vue'
export default {
components: {
'm-header': mHeader
}
}
</script>
在項目中使用Element-UI
安裝element-ui
npm i element-ui -S
創(chuàng)建ElementUI.js
在 /plugins 文件夾下面洪添，創(chuàng)建 ElementUI.js 文件垦页。
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
在nuxt.config.js中添加配置
css: [
'element-ui/lib/theme-chalk/index.css'
],
plugins: [
// ssr: true表示這個插件只在服務端起作用
{src: '~/plugins/ElementUI', ssr: true }
],
build: {
// 防止element-ui被多次打包
vendor: ['element-ui']
}
在項目中使用axios
安裝axios
npm i axios -S
創(chuàng)建axios.js
在 /plugins 文件夾下面，創(chuàng)建 axios.js 文件干奢。
import axios from 'axios'
// 設置baseURL
axios.defaults.baseURL = 'http://localhost:3301'
// 創(chuàng)建axios對象痊焊，暴露
export default axios.create()
在nuxt.config.js中添加配置
防止重復打包
build: {
vendor: ['axios']
}
使用
在項目的任意一個Vue文件中，引入生成了的axios對象：
import axios from '~/plugins/axios'
如果沒有事先創(chuàng)建axios.js忿峻，也可以直接引入axios模塊來使用：
import axios from 'axios'
先創(chuàng)建axios.js薄啥，生成axios對象的好處是，可以做一些配置逛尚，如baseURL等垄惧。
SEO優(yōu)化
全局
修改 nuxt.config.js 配置文件，項目生成的每一個 html 文件的 <head> 中都會加入此配置绰寞。
head: {
// title: pkg.name,
title: '想被百度垂青的標題',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description },
// 其它那些是本來就有的到逊，加上的內容在這里
{
name: 'keywords',
content:
'很多個很多個關鍵詞很多個很多個關鍵詞很多個很多個關鍵詞'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
局部
某個 Vue 文件中：
<script>
export default {
layout: 'mLayout',
// SEO優(yōu)化
head () {
return {
title: '標題',
meta: [
{
name: 'keywords',
content: '很多個很多個關鍵詞很多個很多個關鍵詞很多個很多個關鍵詞'
}
]
}
}
}
</script>
馬克Eslint的一個小坑
在Nuxt項目中，個人出現(xiàn)了Eslint抽風的情況滤钱，報了諸如 Attribute "for" should be on a new line vue/max-attributes-per-line 的error觉壶，并且eslint不能正確地格式化代碼。
解決
修改 .eslintrc.js 文件的配置件缸，在 rules 中加上以下配置铜靶，就不會報錯了。
'vue/max-attributes-per-line': [
2,
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: true
}
}
]
