使用Nuxt

Nuxt.js文档：https://zh.nuxtjs.org/guide/

开始

初始化Nuxt项目

  1. npx create-nuxt-app <项目名>
  3. // or
  5. yarn create nuxt-app <项目名>

运行

  1. npm run dev

路由

基础路由

Nuxt.js依据 pages 目录结构自动生成 vue-router 模块的路由配置。

举例， pages 如下：

  1. pages/
  2. --| user/
  3. -----| index.vue
  4. -----| one.vue
  5. --| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

  1. router: {
  2.   routes: [
  3.     {
  4.       name: 'index',
  5.       path: '/',
  6.       component: 'pages/index.vue'
  7.     },
  8.     {
  9.       name: 'user',
  10.       path: '/user',
  11.       component: 'pages/user/index.vue'
  12.     },
  13.     {
  14.       name: 'user-one',
  15.       path: '/user/one',
  16.       component: 'pages/user/one.vue'
  17.     }
  18.   ]
  19. }

路由传参

由于在Nuxt.js中，不需要配置 vue-router ，路由配置完全依赖 pages 目录的结构。所以传参时也不例外。

在 vue-router 中，通过 path: '/route/:param' 定义参数，而在Nuxt.js中，通过 _ 为前缀命名的Vue文件或目录。

通过 $route.params.参数名 取到参数值。

layout

在项目中，通常有一些组件，可以被多个页面复用，如 header、footer、nav 等，这些组件可以共同组成一个布局。

在Nuxt项目结构中，有 /layouts 文件夹，在这个文件夹中写布局文件。通常是引入 /components 里的组件，再加上 <nuxt />。

举例：

  1. <template>
  2.   <div class="mLayout">
  3.     <m-header />
  4.     <!-- 这个是“坑”，使用了这个布局文件的页面生成的内容，将出现在下面的这个“坑”里面 -->
  5.     <nuxt />
  6.   </div>
  7. </template>
  9. <script>
  10. // 需要注意的一个小细节 在Nuxt项目中 ~ 代表根目录
  11. import mHeader from '~/components/mHeader.vue'
  13. export default {
  14.   components: {
  15.     'm-header': mHeader
  16.   }
  17. }
  18. </script>

在项目中使用Element-UI

安装element-ui

  1. npm i element-ui -S

创建ElementUI.js

在 /plugins 文件夹下面，创建 ElementUI.js 文件。

  1. import Vue from 'vue'
  2. import ElementUI from 'element-ui'
  3. Vue.use(ElementUI)

在nuxt.config.js中添加配置

  1. css: [
  2.   'element-ui/lib/theme-chalk/index.css'
  3. ],
  4. plugins: [
  5.   // ssr: true表示这个插件只在服务端起作用
  6.   {src: '~/plugins/ElementUI', ssr: true }
  7. ],
  8. build: {
  9.   // 防止element-ui被多次打包
  10.   vendor: ['element-ui']
  11. }

在项目中使用axios

安装axios

  1. npm i axios -S

创建axios.js

在 /plugins 文件夹下面，创建 axios.js 文件。

  1. import axios from 'axios'
  3. // 设置baseURL
  4. axios.defaults.baseURL = 'http://localhost:3301'
  6. // 创建axios对象，暴露
  7. export default axios.create()

在nuxt.config.js中添加配置

防止重复打包

  1. build: {
  2.   vendor: ['axios']
  3. }

使用

在项目的任意一个Vue文件中，引入生成了的axios对象：

  1. import axios from '~/plugins/axios'

如果没有事先创建axios.js，也可以直接引入axios模块来使用：

  1. import axios from 'axios'

先创建axios.js，生成axios对象的好处是，可以做一些配置，如baseURL等。

SEO优化

全局

修改 nuxt.config.js 配置文件，项目生成的每一个 html 文件的 <head> 中都会加入此配置。

  1.   head: {
  2.     // title: pkg.name,
  3.     title: '想被百度垂青的标题',
  4.     meta: [
  5.       { charset: 'utf-8' },
  6.       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  7.       { hid: 'description', name: 'description', content: pkg.description },
  8.       // 其它那些是本来就有的，加上的内容在这里
  9.       {
  10.         name: 'keywords',
  11.         content:
  12.           '很多个很多个关键词很多个很多个关键词很多个很多个关键词'
  13.       }
  14.     ],
  15.     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  16.   },

局部

某个 Vue 文件中：

  1. <script>
  2. export default {
  3.   layout: 'mLayout',
  4.   // SEO优化
  5.   head () {
  6.     return {
  7.       title: '标题',
  8.       meta: [
  9.         {
  10.           name: 'keywords',
  11.           content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词'
  12.         }
  13.       ]
  14.     }
  15.   }
  16. }
  17. </script>

马克Eslint的一个小坑

在Nuxt项目中，个人出现了Eslint抽风的情况，报了诸如 Attribute "for" should be on a new line vue/max-attributes-per-line 的error，并且eslint不能正确地格式化代码。

解决

修改 .eslintrc.js 文件的配置，在 rules 中加上以下配置，就不会报错了。

  1. 'vue/max-attributes-per-line': [
  2.   2,
  3.   {
  4.     singleline: 1,
  5.     multiline: {
  6.       max: 1,
  7.       allowFirstLine: true
  8.     }
  9.   }
  10. ]

搭建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. 更改jupyter-notebook启动时的默认目录

    1.找到jupyter_notebook_config.py: 默认Windows: C:\Users\USERNAME\.jupyter\jupyter_notebook_config.py 2.找 ...

  2. kubernetes-安装Helm

    Helm是什么? Helm可以管理Kubernetes应用程序-Helm Charts帮助您定义,安装和升级最复杂的Kubernetes应用程序. 下载Helm 在https://github.com ...

  3. 使用IDEA将springboot框架导入的两种方法

    第一种新建Maven,导入springboot所依赖的jar包   1.新建一个maven项目,下一步命名,保存文件地址,点击完成         2.进去springboot下载(点击进入),复制p ...

  4. SpringCloud学习心得—1.3—Eureka与REST API

      SpringCloud学习心得—1.3—Eureka与REST API Eureka的REST API接口 API的基本访问 Eureka REST APIEureka 作为注册中心,其本质是存储 ...

  5. CentOS7 yum方式 安装mysql 5.7.28步骤

    CentOS7系统yum方式安装MySQL5.7 最新的yum源可以去http://dev.mysql.com/downloads/repo/yum下载 1.获取mysql官方yum reposito ...

  6. Maven01-maven打包Web项目成war文件-tomcat脱机运行启动项目

    1 执行package 2 复制 3 catalina run  ,打开cmd窗口 4 输入网址 5注意要配置tomcat的 Application context为工程名字

  7. python - django (视图)

    # """ 一:# 视图 (接收请求返回响应的那部分) FBV版:基于 函数的 请求 CBV版:基于 类的 请求 注册方法: url(r'^add_publisher/' ...

  8. Tensorflow细节-P190-输入文件队列

    以下代码要学会几个地方 1.filename = ('data.tfrecords-%.5d-of-%.5d' % (i, num_shards)) 这个东西就是要会data.tfrecords-%. ...

  9. UVA 11468 Substring (记忆化搜索 + AC自动鸡)

    传送门 题意: 给你K个模式串, 然后,再给你 n 个字符, 和它们出现的概率 p[ i ], 模式串肯定由给定的字符组成. 且所有字符,要么是数字,要么是大小写字母. 问你生成一个长度为L的串,不包 ...

  10. Educational Codeforces Round 68 (Rated for Div. 2)---B

    http://codeforces.com/contest/1194/problem/B /* */ # include <bits/stdc++.h> using namespace s ...