nuxt⽬录结构及配置⽂件详解
nuxt ⽬录结构详解
⾸先我们来看下使⽤ create-nuxt-app脚⼿架⼯具所创建的nuxt项⽬⽬录的结构，
windows cmd 命令⾏输⼊，tree /f /a ，打印如下项⽬⽬录结构：
C:.
|  .editorconfig
|  .gitignore
|  fig.js
|  package.json
|  README.md
|
+---assets
|      README.md
|
+---components
|      Logo.vue
|      README.md
|
+---layouts
|      default.vue
|      README.md
|
+---middleware
|      README.md
|
+---pages
|      index.vue
|      README.md
|
+---plugins
|      README.md
|
+---static
|      favicon.ico
|      README.md
|
\---store
README.md
我们现在来分析⼀下，可以发现，⽬录结构中有：
⽂件夹8个： assets、components、layouts、middleware、pages、plugins、static、store 这个
⽂件5个：.editorconfig、.gitignore、fig.js、package.json、README.md
好，我们现在梳理出了项⽬⽬录下所有的⽂件夹和⽂件，我们现在呢，就来分析下它们的具体的功能：
1. ⾸先，我们来分析每个⽂件夹的功能，我们可以看到在每个⽂件夹下⾯有⼀个README.md这样⼀个markdown⽂件，我们打开这个
⽂件，可以看见⾥⾯有⼀些关于这个⽬录使⽤的⼀些说明，⼤致呢，包括下⾯⼏种，
（1）是否必须，不必要的话可以删除
（2）该⽬录有哪些作⽤
（3）还有⽂档的官⽅⽂档地址
2. ⽬录功能的具体介绍
assets ，存放⼀些静态资源，包括⼀些 Sass、Less 或者⼀些 Javascript ⽂件 ，在项⽬组件中引⽤的时候需要在开头使⽤ ~assets/
assets ，存放⼀些静态资源，包括⼀些 Sass、Less 或者⼀些 Javascript ⽂件 ，在项⽬组件中引⽤的时候需要在开头使⽤ ~assets/符号，如果你的静态资源⽂件需要 webpack 做构建编译处理，可以放到 assets ⽬录，否则可以放到 static ⽬录中去，这也是 assets ⽬录 和 static ⽬录的⼀个区别
components , 这是⼀个存放 vue.js 组件⽂件的⽬录，⽽且呢，Nuxt.js 在构建的时候，也不会处理这些组件⽂件，对这些⽂件内容进⾏增强，就是增加如下的这些内容：
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
.
..
}
layouts，这个⽬录呢，包含着开发项⽬的布局，在这⾥⾯呢可以定义⼀些项⽬的公⽤结构，⽐如导航栏等
在这个⽬录呢，我们来新建⼀个blog.vue，内容如下：
<template>
<div>
<header><h3>这是我的 blog 导航栏</h3></header>
<nuxt />
</div>
</template>
然后我们在page⽬录下，新建⼀个posts.vue⽂件，编辑如下：
<template>
<div class="container">
我是⼀篇⽂章
</div>
</template>
<script>
export default{
layout:'blog'
}
</script>
我们也可以在page⽬录下⾯index..vue，新增layout: 'blog'，我们也会发现在⾸页/的顶部我们也出现了我们的haedr标题
middleware，这个middleware⽬录主要是⽤于存放⼀些⽅法函数，在页⾯加载渲染前运⾏，每⼀个中间件应放置在 middleware/ ⽬录。⽂件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
⼀个中间件接收 作为第⼀个参数：
middleware/stats.js
import axios from'axios'
export default function({ route }){
return axios.post('my-stats-api',{
url: route.fullPath
})
}
使⽤⽅法，分别在我们的 fig.js 、 layouts 或者 pages 中使⽤中间件:
使⽤⽅法，分别在我们的 fig.js 、 layouts 或者 pages 中使⽤中间件:
// 现在，stats 中间件将在每个路由改变时被调⽤
router:{
middleware:'stats'
}
}
我们也可以将 middleware 添加到指定的布局或者页⾯，pages/index.vue 或者 layouts/default.vue: // 在当前页⾯或者布局加载之前执⾏
export default{
middleware:'stats'
}
pages，pages ⽬录是⼀个存放页⾯（.vue）的⽂件夹，这些页⾯的层级约束的页⾯路由url的跳转及展⽰，Nuxt 会帮我们将 pages 下⾯的⽂件的层级⾃动解析成路由
plugins，存放⼀些第三⽅库（element-ui等）的引⽤，然后在 fig.js 中的plugins字段中配置使⽤
static，存放静态资源的⽬录，包括⼀些图⽚，视频，⾳乐等媒体资源
store，存放vuex状态树⽂件，包括 state.js、store.js 等等
3. 根⽬录⽂件的介绍
package.json：npm 包管理器的⽂件，⽤于管理项⽬的依赖，包括暴露 npm script 命令的管理
.gitignore：git 仓库 忽略的⽂件
.editorconfig, 编辑器的相关字体，颜⾊等配置
README.md，项⽬的markdown介绍⽂件
安卓在线解析json接下来，我们来补充下，整个 nuxt.js 为页⾯提供的⼀些特殊配置
属性名描述
asyncData最重要的⼀个键, ⽀持 异步数据处理，另外该⽅法的第⼀个参数为当前页⾯组件的 上下⽂对象。
fetch 与 asyncData ⽅法类似，⽤于在渲染页⾯之前获取数据填充应⽤的状态树（store）。不同的是 fetch ⽅法不会设置组件的数据。详情请
参考 关于fetch⽅法的⽂档。
head配置当前页⾯的 Meta 标签, 详情参考 页⾯头部配置API。
layout指定当前页⾯使⽤的布局（layouts 根⽬录下的布局⽂件）。详情请参考 关于 布局 的⽂档。
loading 如果设置为false，则阻⽌页⾯⾃动调⽤this.loading.finish()和this.loading.start()，您可以⼿动控制它，请看例⼦，仅适⽤于在fig.js中设置loading的情况下。请参考API配置 loading ⽂档。
transition指定页⾯切换的过渡动效, 详情请参考 页⾯过渡动效。
scrollToTop布尔值，默认: false。 ⽤于判定渲染页⾯前是否需要将当前页⾯滚动⾄顶部。这个配置⽤于 嵌套路由的应⽤场景。
validate校验⽅法⽤于校验 动态路由的参数。
middleware指定页⾯的中间件，中间件会在页⾯渲染之前被调⽤， 请参考 路由中间件。
nuxt.nuxt.
现在我们来介绍 fig.js 配置⽂件详细介绍
字段 mode：
mode: 'universal',
nuxt 项⽬的开发模式，默认是 universal （SSR服务端渲染），但是呢，它还有⼀个值，是spa ，就是我们常说的单页⾯应⽤，使⽤nuxt是可以构建单页⾯应⽤的，类似于使⽤vue-cli脚⼿架⼯具的创建spa
项⽬
字段 head：
这个head呢，就是我们的项⽬页⾯的header部分，这些配置会在head标签⾥⾯⽣成对应的meta，link等标签，这⾥默认的title是我们项⽬package.json的默认name，描述呢，也是我们项⽬默认的 description ; 这⾥的hid属性，是我们的id标识符，⽤于区分相同name的meta标签， 这⾥的Link 是我们项⽬的ico，默认的 / 地址，是我们的static⽬录下地址
head:{
title: v.npm_package_name ||'',
meta:[
{ charset:'utf-8'},
{ name:'viewport', content:'width=device-width, initial-scale=1'},
{ hid:'description', name:'description', content: v.npm_package_description ||''}
]
,
link:[
{ rel:'icon', type:'image/x-icon', href:'/favicon.ico'}
]
}
字段 loading:
loading: { color: '#fff' }
⽬录项⽬页⾯切换，默认的加载配置
在页⾯切换的时候，Nuxt.js 使⽤内置的加载组件显⽰加载进度条。我们可以定制它的样式，禁⽤或者创建⾃⼰的加载组件。
export default{
mounted(){
this.$nextTick(()=>{
this.$nuxt.$loading.start()
setTimeout(()=>this.$nuxt.$loading.finish(),500)
})
}
}
禁⽤加载进度条
loading:false
}
字段 css :
存放样式⽂件，可以在项⽬的全局加载出来，可以放置⼀些全局的⽽⼀些浏览器默认样式
字段 plugins: <Array[String|Object]>
使⽤⽅式
plugins:['~plugins/vue-notifications']
}
然后, 我们需要创建 plugins/vue-notifications.js ⽂件：
然后, 我们需要创建 plugins/vue-notifications.js ⽂件：
import Vue from'vue'
import VueNotifications from'vue-notifications'
Vue.use(VueNotifications)
字段 modules:
modules是Nuxt.js扩展，可以扩展它的核⼼功能并添加⽆限的集成。
参考案例：
export default{
modules:[
// Using package name
'@nuxtjs/axios',
// Relative to your project srcDir
'~/modules/awesome.js',
// Providing options
['@nuxtjs/google-analytics',{ ua:'X1234567'}],
/
/ Inline definition
function(){}
]
}
字段 build: <Boolean 或 Object>
Nuxt.js 允许我们在⾃动⽣成的 vendor.bundle.js ⽂件中添加⼀些模块，以减少应⽤ bundle 的体积。如果你的应⽤依赖第三⽅模块，这个配置项是⼗分实⽤的。
Nuxt.js 使⽤ webpack-bundle-analyzer 分析并可视化构建后的打包⽂件，你可以基于分析结果来决定如何优化它。
案例代码：
build:{
analyze:true
// or
analyze:{
analyzerMode:'static'
}
}
}
字段 devModules,
类似于 module 字段，但只运⾏于开发环境，不会在线上环境构建

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。