Before been doing vue-spa single page, is not conducive to SEO. The ease of SEO SSR (server side rendering) multi-page application, you can use this framework to achieve nuxt.js
(0) nuxt installation
npx create-nuxt-app <project name>
The following is learning to understand by the generated catalog file
(1) Resource Directory assets and static directory - resource file section
assets: static resource files are made Webpack build the compilation process
. " 1 "css introduced resource file
after the slash // NOTE ~ no
background: URL (" - Assets / banner.svg ")
" 2 "VUE file:
<IMG the src =" ~ / Assets / image.png ">
static : no Webpack compile processing
resources relative path to solve the routing problem
"1" vue file
<img src = "../ static / 1.png" />
(2) layout catalog layouts / pages pages - view of part of the
"1" by default layout (layouts / default.vue)
<Template>
<nuxt />
</ Template>
"2" custom layout
1. Create the file layouts / self.view
<template>
<div>
<div> custom layout </ div>
<nuxt />
</ div>
</ Template>
2. Use page Pages / index
Export {default
layout: 'Self' // specify custom template
}
"3 "error page
customized error page: .layouts / error.vue
<Template>
<div class =" Container ">
<h1 of V-IF =" 404 error.statusCode === "> page does not exist </ h1 of>
<h1 of v-else> error exception </ h1> applications occurs
<nuxt-link to = "/ "> Home </ nuxt-Link>
</ div>
</ Template>
<Script>
export default {
props: ['error'],
layout: 'Self' // You can specify custom page layout for error
}
</ Script>
"4" Pages and the page configuration items:
asyncData, FETCH, head, layout, loading, Transition, scrollToTop, the validate, Middleware
this section to view the Api - page section
(3) plugins directory plugins (Global) - Plug-part
" 1 "using the plug
a.plugins / VUE-notifications.js
Import from Vue 'VUE'
Import from VueNotifications 'VUE-Notifications'
Vue.use (VueNotifications)
within b.nuxt.config.js arranged
module.exports = {
plugins: [ '~ / plugins / VUE-Notifications']
}
"2" injection Vue example
a.plugins / VUE-inject.js:
Import from Vue 'VUE'
. Vue.prototype myInjectedFunction $ = (String) => the console.log ( "IS AN This example", String)
b.nuxt.config.js
export default {
plugins: ['~/plugins/vue-inject.js']
}
c.pages页面使用：
this.$myInjectedFunction('test')
《4》注入context
a.plugins/ctx-inject.js:
export default ({ app }, inject) => {
// Set the function directly on the context.app object
app.myInjectedFunction = (string) => console.log('Okay, another function', string)
}
b.nuxt.config.js:
export default {
plugins: ['~/plugins/ctx-inject.js']
}
Use c.pages Page:
Export default {
asyncData (context) {
context.app.myInjectedFunction ( 'CTX!')
}
}
". 5" simultaneous injection - inject method
a.plugins / Combined-inject.js
Export default (App {}, Inject) => {
Inject ( 'myInjectedFunction', (String) => the console.log ( 'That WAS Easy!', String))
}
B. invocations of the above two methods are OK
"6" only used by the client plug-in nuxt.config.js
Export default {
plugins: [
{the src: '~ / plugins / both-sides.js'}, // & Client Server both
{the src: '~ / plugins / Client-only.js', MODE: 'Client'},
{the src: '~ / plugins / Server-only.js', mode: 'server' }}
]
}
(4) routing section:
routing configuration automatically generate vue-router module pages directory structure according to
(1) Dynamic Routing:
pages /
- | _slug /
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/: Slug / Comments',
Component: 'Pages / _slug / comments.vue'
}
]
}
routing parameters check: Pages / Users / _id.vue
the validate ({the params}) {
// the type number must
return /^\d+$/.test(params.id)
}
(2) nested route
Note:
1. Add a Vue file and add a directory with the same file name [] used to store subview assembly.
2. Do not forget to increase <nuxt-child /> within parent components (.vue file) for displaying the contents of the sub-view.
Pages /
- | Users /
----- | _id.vue
----- | index.vue
- | users.vue
Router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
(5).Middleware directory Middleware
Note:
- Middleware for storage applications
1. middleware allows you to define a custom function to run before a page or group of pages render (similar vue-router navigation guard)
2. The name of the file name will be the name of the middleware (middleware / auth.js will be the middle auth member)
3. The middleware receives a context as the first parameter (context - see APi)
Export default function (context) {
context.userAgent process.server context.req.headers = [ 'User-Agent']: Navigator?. the userAgent
}
4. middleware execution flow sequence: nuxt.config.js -> match layout -> page match
5. case:
1.middleware / stats.js
Import from Axios 'Axios'
Export default function (route {}) {
return axios.post ( 'http://my-stats-api.com', {
URL: route.fullPath
})
}
2. in nuxt.config.js, layouts or pages in a middleware
(1) nuxt.config.js: is invoked at each route change
module.exports = {
Router: {
Middleware: 'stats'
}
}
(2) Layouts / or default.vue Pages / index.vue
Export default {
Middleware : 'stats'
}
(. 6) Store directory - Vuex state tree
1.Nuxt.js attempt to find a store directory under the root directory of the application, to do the following
1. vuex reference module
2. the module vuex added vendors to build configuration
3. set the root instance Vue store configuration items
2.: HTTPS: //zh.nuxtjs.org/guide/vuex-store
(. 7) asynchronous data (asyncData)
1. limited page components - is called before each load ( beforeCreate before execution)
2. Since asyncData method is called before the initialization of the component Therefore the method is in no way to refer to an object instance of the component by this.
2. The first parameter is set to the current page context object: the parameter is an object context, object properties:
https://zh.nuxtjs.org/api/context
context: {
App: Vue root instance // context. . App $ Axios,
the params: route.params alias,
Query: route.query alias,
error: error page display,
the redirect: redirect to another user requests route, redirect ([status,] path [, query])
env: nuxt.config.js configured environment variables, see the API environment variables (nested routing example - see Demo)
Store: Vuex data,
route: Vue Router routing instance,
isDev: dev development mode,
isHMR: hot replacement module,
REQ:
RES:
nuxtState:
beforeNuxtRender (Fn):
}
callback / dynamic routing parameters / error handling:
using the name of its configuration file or folder access dynamic path parameters: _id.vue
Export default {
asyncData (the params {}, the callback) {
axios.get ( `HTTPS: // My-API / Posts / the params.id} {$`)
.then ((RES) => {
the callback (null, {title: RES. } data.title)
}) the catch ((E) => {.
// statusCode: specify the server returns the request status code
error ({statusCode: 404, Message: 'Not found Post'})
})
}
}
acquired query parameters
https://zh.nuxtjs.org/api/pages-watchquery
watchQuery: [ 'Page']
if the defined string changes, all of the components will invoke method (asyncData, FETCH, the validate, layout, ...)
" 8 "dynamic transition effect
globally transition dongxiao provided
Nuxt.js default name for the transition effect Page
example:
//assets/main.css
.page-Active-Enter, Leave-Active-.page {Transition: Opacity .5s;}
.page-Enter, Leave-Active-.page {
Opacity: 0;
}
//nuxt.config .js
module.exports = {
CSS: [
'Assets / the main.css'
]
}
// use
autoglobal using
2 page transition effect provided movable
page style:
.bounce-Active {Enter-Animation: Bounce-in .8s; }
.bounce {-Active Leave-Animation: Bounce-OUT .5s;}
@keyframes Bounce-in {
0% {Transform: Scale (0)}
50% {Transform: Scale (for 1.5)}
100% {Transform: Scale (. 1)}
}
Bounce-OUT {@keyframes
0% {Transform: Scale (. 1)}
50% {Transform: Scale (for 1.5)}
100% {Transform: Scale (0)}
}
Page Application:
Export default {
Transition: 'Bounce', / / animation
}
or:
Export default {
Transition: {
name: 'Test',
MODE: 'OUT-in'
}
}
using time as a function of the type 3.transition
see demo case
<Template>
<div class = "container">
<NuxtLink-IF = V "Page>. 1 ": to =" + (Page -. 1) "> <Prev, </ NuxtLink> 'Page =?'
<a v-else class="disabled">< Prev</a>
<span>{{ page }}/{{ totalPages }}</span>
<NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></NuxtLink>
<a v-else class="disabled">Next ></a>
<ul>
<li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" />
<span>{{ user.first_name }} {{ user.last_name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
watchQuery: ['page'],
// Key for <NuxtChild> (transitions)
key: to => to.fullPath,
// Called to know which transition to apply
transition (to, from) {
if (!from) { return 'slide-left' }
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
},
async asyncData ({ query }) {
const page = +query.page || 1
const data = await fetch(`https://reqres.in/api/users?page=${page}`).then(res => res.json())
return {
page: +data.page,
totalPages: data.total_pages,
users: data.data
}
}
}
</ Script>
(. 9) custom add
a first: custom add-in component
1.components / loading
loading.vue
2.nuxt.config.js
loading: '~ / Components / loading.vue'
second : loading bar
1.nuxt.config.js
loading: {Color: 'Red'} // progress bar style modified
2.pages / index page of
this $ nuxt $ loading.start () // start loading bar..
the this . $ nuxt $ loading.finish () // between loading bar.
(10) other:
process.static: to determine whether the application is true whether generated by the Generator nuxt
process.server: when the value of true indicates the current execution environment for the server
control plug-in library use only certain scripts on the server
case: process.static 'static':?? (process.server 'server': 'client')