搭建Nuxt项目（搭配Element UI、axios）
使用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）的更多相关文章
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- element ui axios使用formdata提交数据
axios({ //formdata提交 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequ ...
- Element ui结合springboot的简单实战
Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...
- Electron-vue实战（一）—搭建项目与安装Element UI
Electron-vue实战—搭建项目与安装Element UI 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.新建项目1.初始化项目打开cmd,新建一个项目,我使用的是electro ...
- FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI 框架搭建
Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...
随机推荐
- mysql遇到时区问题的坑(Java解决方案)
最近项目遇到一个坑,就是server和db之间存在时区问题,本人的db是utc时间, 可以使用代码设置时区来解决,本人这里使用joda三方包,joda蛮好用的,具体用法这里不做详细描述. 先引入pom ...
- Java精通并发-多线程同步关系实例剖析与详解
在上一次https://www.cnblogs.com/webor2006/p/11422587.html中通过实践来解了一个案例,先来回顾一下习题: 编写一个多线程程序,实现这样的一个目标: 1.存 ...
- 题解 洛谷P1281 【书的复制】
蒟蒻的\(DP\)很菜,\(SO\)我准备上一套二分的玄学操作 一.简单的二分答案 二分主要是用来解决一些最值问题,它可以有效的优化暴力,使复杂度减少到\(O(logn)\). 我先给大家介绍一下二分 ...
- spring boot学习笔记（二）创建spring boot项目
用eclipse(需要用高版本,要不然弄不出来):new →Spring Sarter Project 用IDEA:一般默认 一般默认 入门级的先 剩下的一般默认... 一.项目至少有下面的东西,里面 ...
- 文件操作-with和上下文管理器
代码: # -*- coding:utf-8 -*- # 普通版 如果写入的过程中出错 则不会释放资源 def m1(): f = open("test.txt","w& ...
- c语言中，如果将无符号数转换为有符号数
在使用ti的adc芯片ads1259时,芯片是24为数据格式保存的,其中最高位是符号位,因此可以理解为是有符号数据,但是在嵌入式系统中,没有直接24位的变量,因此使用32的无符号先保存24位的数据. ...
- windows nginx 目录配置
http { server { listen 80; server_name www.test.com; location / { root E:/data/www; index index.html ...
- [Javascript] Avoid Accidental Returns of New State by using the void Keyword
For example we have a 'useState' function, which takes a state and a function to update the state: c ...
- shiro认证+盐加密
Shiro认证 导入pom依赖 <shiro.version>1.2.5</shiro.version> <!--shiro--> <dependency&g ...
- 题解 CF1097F 【Alex and a TV Show】
妙妙题-- 这道题这要求%2的个数,肯定有什么性质 于是我们想到了用\(bitset\)来处理 由于三操作有\(gcd\),于是我们又想到用反演来解决 我们回忆一下反演的柿子 设\(f(x)\)为x出 ...