nuxtjs目录结构
其目录结构包含了一个项目开发中通用的东西
assets 存放静态资源
componets 存放vue组件，这类组件类似于react中的无状态组件，可复用的用于构建页面内容，但不具有nuxtjs提供的特性
layouts 存放布局组件，但我感觉实际编写代码时作用不大?
middleware 存放中间件，有express或者koa开发经验的话，应该很容易理解
pages 类似于spa中的views文件夹，是整个项目中最重要的内容，值得一提的是，nuxtjs会根据pages的结构自动生成router
plugins 用于存放插件的配置文件，以elementui为例
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })
这里用Vue.use()全局注册了elementui，后面需要按需引入的时候，还得修改
static 存放静态文件，文件夹中的内容会被映射的根目录下，并且不会被webpack编译处理
store 和vuex相关，存放spa单页应用中的vuex配置
nuxt.config.js 是nuxtjs的配置文件，可以配置项目的入口文件，类似于koa中的/bin/www
值得一提的是 ~ 可以代表根目录，不用再编写../../之类繁琐的路径url
nuxt.config.js
export default {
mode: 'universal', //选择单页模式还是多页模式
/*
** Headers of the page
*/
//由于项目没有html文件，这里可以直接指定title,以及其他配置
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' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'element-ui/lib/theme-chalk/index.css'
],//全局引入css文件
/*
** Plugins to load before mounting the App
*/
plugins: [
'@/plugins/element-ui'
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/ /
build: {
transpile: [/^element-ui/],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
其实配置文件还是比较通俗易懂的，其他的配置要看文档的api辽
路由
基础路由
是由nuxtjs自动根据pages的结构生成的
动态路由
给vue文件或者文件夹添加_ 即可。对于动态路由可以添加路由校验，如果不满足要求，那么返回错误页面
嵌套路由
在vue文件的同名文件夹中编写vue页面即可
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
中间件
在middleware文件夹中添加js文件，其将会在下一个页面跳转之前执行，其接收的参数是ctx。
中间件执行流程顺序：
nuxt.config.js- 匹配布局
- 匹配页面
也就是说，应该在nuxt.config.js layout或者pages中添加middleware之后，中间件才会被执行
类似于这样
//vue文件中
export default {
middleware: 'stats' //中间件名
}
//nuxt.config.js中
module.exports = {
router: {
middleware: 'stats'
}
}
视图
官网的图应该很清晰的展现了nuxtjs视图
创建app.html
可以修改ie的条件表达式等，中小型项目其实没有必要改
//默认模板
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
//修改后的模板
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
布局
即通过修改layout/default.vue可以修改页面的布局
类似于spa中的app.vue的作用
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt/>
</div>
</template>
可以在默认布局中添加header之类的东西
但是如果使用自定义layout，必须在pages中指定
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>
pages
这是nuxtjs中最主要的内容
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
asyncData (context) {
// called every time before loading the component
return { name: 'World' }
},
fetch () {
// The fetch method is used to fill the store before rendering the page
},
head () {
// Set Meta Tags for this Page
},
// and more functionality to discover
...
}
</script>
<style>
.red {
color: red;
}
</style>
一些不同于传统vue的特殊项
| 属性名 | 描述 |
|---|---|
| asyncData | 最重要的一个键, 支持 异步数据处理，另外该方法的第一个参数为当前页面组件的 上下文对象。 |
| fetch | 与 asyncData 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 fetch 方法不会设置组件的数据。详情请参考 关于fetch方法的文档。 |
| head | 配置当前页面的 Meta 标签, 详情参考 页面头部配置API。 |
| layout | 指定当前页面使用的布局（layouts 根目录下的布局文件）。详情请参考 关于 布局 的文档。 |
| loading | 如果设置为false，则阻止页面自动调用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading的情况下。请参考API配置 loading 文档。 |
| transition | 指定页面切换的过渡动效, 详情请参考 页面过渡动效。 |
| scrollToTop | 布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于 嵌套路由的应用场景。 |
| validate | 校验方法用于校验 动态路由的参数。 |
| middleware | 指定页面的中间件，中间件会在页面渲染之前被调用， 请参考 路由中间件。 |
asyncData
这是nuxtjs扩展的方法，其在pages中，其实可以理解为一个特殊的生命周期，在return时，会自动把数据合并到data中，其作用类似于我们在created中利用axios获取到数据后初始化data。并且在服务器端使用nuxtjs时，asyncData可以获得res、req参数，类似express的中间件
区分assets和static
两者的区别主要是，assets中的文件会被webpack编译构建，static中的文件会被挂载到根目录，那么一些seo优化的内容就可以放到static中，方便搜索引擎爬取。而css之类的要放在assets中，方便别名之类的被编译
网友评论