Use Nuxt
Nuxt.js document: https://zh.nuxtjs.org/guide/
Start
Initialization Nuxt project
npx create-nuxt-app <项目名>
// or
yarn create nuxt-app <项目名>
run
npm run dev
routing
Basic routing
Nuxt.js based pagesdirectory structure generated automatically vue-routerconfigure routing module.
For example, pagesthe following:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
Then, Nuxt.js automatically generated routing configuration is as follows:
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' } ] } Routing parameter passing
Since Nuxt.js, no configuration vue-router, routing configuration entirely dependent pagesdirectory structure. So no exception when mass participation.
In the vue-routerby path: '/route/:param'-defined parameters, while in Nuxt.js by _prefixed named Vue file or directory.
By $route.params.参数名taking the values of the parameters.
layout
In the project, there is usually some components that can be multiplexed multiple pages, such as header, footer, nav, etc., these components may together form a layout.
In Nuxt project structure, there are /layoutsfolders, writing layout files in this folder. Usually introduced /componentsin the assembly, plus <nuxt />.
For example:
<template>
<div class="mLayout"> <m-header /> <!-- 这个是“坑”，使用了这个布局文件的页面生成的内容，将出现在下面的这个“坑”里面 --> <nuxt /> </div> </template> <script> // 需要注意的一个小细节 在Nuxt项目中 ~ 代表根目录 import mHeader from '~/components/mHeader.vue' export default { components: { 'm-header': mHeader } } </script> Use Element-UI in the project
Installation element-ui
npm i element-ui -S
Creating ElementUI.js
In the /pluginsfolder, create ElementUI.js file.
import Vue from 'vue'
import ElementUI from 'element-ui' Vue.use(ElementUI) Add the configuration 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 use in the project
Installation axios
npm i axios -S
Creating axios.js
In the /pluginsfolder, create axios.js file.
import axios from 'axios'
// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3301' // 创建axios对象，暴露 export default axios.create() Add the configuration nuxt.config.js
Prevent duplicate package
build: {
vendor: ['axios']
}
use
Vue file in any project, the introduction of axios generated objects:
import axios from '~/plugins/axios'
If you have not previously created axios.js, it can also be directly introduced axios modules:
import axios from 'axios'
Benefits create axios.js, generated axios objects that can do some configuration, such as baseURL and so on.
SEO optimization
Overall situation
Nuxt.config.js modify configuration files, each project generated a html file <head>in will be added to the configuration.
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' }] }, Partial
A Vue file:
<script>
export default { layout: 'mLayout', // SEO优化 head () { return { title: '标题', meta: [ { name: 'keywords', content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词' } ] } } } </script> Mark Eslint of a pit
In Nuxt project, there have been individual cases of Eslint ventilation, such as the reported Attribute "for" should be on a new line vue/max-attributes-per-lineerror, and eslint not properly formatted code.
solve
.Eslintrc.js modify the configuration file, in rulesthe following configuration plus, would not the error.
'vue/max-attributes-per-line': [
2,
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: true
}
}
]