使用Nuxt
Nuxt.js文档：https://zh.nuxtjs.org/guide/
开始
初始化Nuxt项目
npx create-nuxt-app <项目名>
// or
yarn create nuxt-app <项目名>
运行
npm run dev
路由
基础路由
Nuxt.js依据 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' 定义参数，而在Nuxt.js中，通过 _ 为前缀命名的Vue文件或目录。
通过 $route.params.参数名 取到参数值。
layout
在项目中，通常有一些组件，可以被多个页面复用，如 header、footer、nav 等，这些组件可以共同组成一个布局。
在Nuxt项目结构中，有 /layouts 文件夹，在这个文件夹中写布局文件。通常是引入 /components 里的组件，再加上 <nuxt />。
举例：
<template>
<div class="mLayout"> <m-header /> <!-- 这个是“坑”，使用了这个布局文件的页面生成的内容，将出现在下面的这个“坑”里面 --> <nuxt /> </div> </template> <script> // 需要注意的一个小细节 在Nuxt项目中 ~ 代表根目录 import mHeader from '~/components/mHeader.vue' export default { components: { 'm-header': mHeader } } </script> 在项目中使用Element-UI
安装element-ui
npm i element-ui -S
创建ElementUI.js
在 /plugins 文件夹下面，创建 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
创建axios.js
在 /plugins 文件夹下面，创建 axios.js 文件。
import axios from 'axios'
// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3301' // 创建axios对象，暴露 export default axios.create() 在nuxt.config.js中添加配置
防止重复打包
build: {
vendor: ['axios']
}
使用
在项目的任意一个Vue文件中，引入生成了的axios对象：
import axios from '~/plugins/axios'
如果没有事先创建axios.js，也可以直接引入axios模块来使用：
import axios from 'axios'
先创建axios.js，生成axios对象的好处是，可以做一些配置，如baseURL等。
SEO优化
全局
修改 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优化 head () { return { title: '标题', meta: [ { name: 'keywords', content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词' } ] } } } </script> 马克Eslint的一个小坑
在Nuxt项目中，个人出现了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
}
}
]