nuxt.JS基于Vue的服务端渲染框架
脚手架的安装
1.首先确定是否安装npx (NPM 5.2.0默认安装)
// npx安装
npx create-nuxt-app <项目名>
// yarn安装
yarn create nuxt-app <项目名>
2.package.json 创建完成后:
//将 nuxt 安装至项目中
npm install --save nuxt
目录介绍
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面，我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件，比如图片
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
配置文件nuxt-config.js认识
module.exports = {
mode: 'spa', // 页面的模式 下载脚手架时选择
//该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件
generate: {
fallback: true // 是否开启404页面 自动配置
// fallback: 'my-fallback/file.html' // 自定义404页面
},
//该配置项用于配置应用默认的meta标签。
head: {
title: process.env.npm_package_name || '',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}
]
},
/*
** 个性化定制 Nuxt.js 使用的加载组件。
*/
loading: {
color: '#fff'
},
/*
** 于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库
** 全局的css文件
*/
css: ['element-ui/lib/theme-chalk/index.css', 'assets/main.css'],
/*
** 配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
*/
plugins: ['@/plugins/element-ui'],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module'
],
/*
** 将Nuxt模块添加到项目中。
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
*/
build: {
transpile: [/^element-ui/],
/*
** 扩展webpack配置
*/
extend(config, ctx) {}
},
router: {
middleware: 'axios'
}
}
路由的配置
1.页面间路由跳转
<template>
<nuxt-link to="/">首页</nuxt-link>
</template>
2.动态路由
//要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
pages/
--| users/
-----| _id.vue
--| index.vue
//Nuxt.js生成对应的路由配置表为:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
}
]
}
3.路由参数校验
4.嵌套路由
5.动态嵌套路由
5.过渡动画
全局过渡
在assets文件中创建css文件内容为:
# 文件名称---main.css
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
在 nuxt.config.js中添加如下配置:
module.exports = {
css: [
'assets/main.css'
]
}
//如果不生效 重启项目
单页面过渡
中间件
中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
创建
// 在 middleware目录下创建一个中间件
// 我的文件名为:stats.js
export default function () {
console.log('....中间件生效了')
}
全局使用
然后在你的 nuxt.config.js 、layouts或者 pages 中使用中间件:
在nuxt.config.js 使用方法
module.exports = {
router: {
middleware: 'stats'
}
}
// stats 中间件将在每个路由改变时被调用。
//只要路由发生变化就会执行中间件中的函数 在控制台打印 ==> ....中间件生效了
单页面使用
将 middleware 添加到指定的布局或者页面:
// pages/index.vue` 或者 `layouts/default.vue
export default {
middleware: 'stats'
}
