使用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

    }

  }

]

搭建Nuxt项目（搭配Element UI、axios）的更多相关文章

  1. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  2. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  3. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  4. element ui axios使用formdata提交数据

    axios({ //formdata提交 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequ ...

  5. Element ui结合springboot的简单实战

    Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...

  6. Electron-vue实战（一）—搭建项目与安装Element UI

    Electron-vue实战—搭建项目与安装Element UI 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.新建项目1.初始化项目打开cmd,新建一个项目,我使用的是electro ...

  7. FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  8. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  9. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

随机推荐

  1. 资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统

    资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是资源隔离 资源隔离是指为不同任务提供可独立使用的计算资源以 ...

  2. 大数据技术之Hadoop3.1.2版本完全分布式部署

    大数据技术之Hadoop3.1.2版本完全分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.主机环境准备 1>.操作系统环境 [root@node101.yinz ...

  3. 彻底终结MySQL同步延迟问题

    作为一名DBA,在工作中会经常遇到一些MySQL主从同步延迟的问题,这些同步慢的问题,其实原因非常多,可能是因为主从的网络问题导致,可能是因为网络带宽问题导致,可能是因为大事务导致,也可能是因为单线程 ...

  4. 移动魔百和PTV-8098可以免拆直接安装第三方的软件

    前言:江苏用户的福音啊!当地移动魔百和PTV-8098可以免拆直接安装第三方的软件,其他地区的PTV-8098未做测试,可以自己根据教程步骤进行测试: 准备工具:8G或4G的U盘(太大无法识别).电脑 ...

  5. 剑指offer：用两个栈实现一个队列

    题目 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解题思路 用一个栈A来保存入栈,当要出栈的时候,将栈A的元素按照栈后进先出的特点转移到栈B中(此时栈A为空了 ...

  6. k8s安装之flannel.yaml

    收藏一下,以后直接从这里cp过来用的. flannel新版 --- apiVersion: extensions/v1beta1 kind: PodSecurityPolicy metadata: n ...

  7. 分布式调度平台XXL-JOB源码分析-时序图

    整体流程 初始化 任务调度 任务执行 任务回调 注册心跳

  8. python算法与数据结构-快速排序算法(36)

    一.快速排序的介绍 快速排序(英语:Quicksort),又称划分交换排序(partition-exchange sort),通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外 ...

  9. 最小生成树：Tree

    参考资料:https://blog.csdn.net/sunshinezff/article/details/48749453 Description 给你一个无向带权连通图,每条边是黑色或白色.让你 ...

  10. Union-Find(并查集): Quick union improvements

    Quick union improvements1: weighting 为了防止生成高的树,将smaller tree放在larger tree的下面(smaller 和larger是指number ...