vue-nuxt

Nuxt项目各级目录功能一览

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

nuxt-test
├─nuxt.config.js
├─package.json
├─README.md
├─store
|   └README.md
├─static
|   ├─favicon.ico
|   └README.md
├─server
|   └index.js
├─plugins
|    ├─element-ui.js
|    └README.md
├─pages
|   ├─index.vue
|   └README.md
├─middleware
|     └README.md
├─layouts
|    ├─default.vue
|    └README.md
├─components
|     ├─Logo.vue
|     └README.md
├─assets
|   └README.md

一、pages目录

pages 用于构建Nuxt的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

可以通过文件/文件夹名称规则,生成动态路由、嵌套路由等

二、server目录

server Nuxt服务端代码

三、layouts目录

layouts 存放Nuxt的布局组件,该目录不能被重命名。

如已有layouts/mine.vue布局文件,可以在pages/*.vue文件下这样使用对应布局

export default {
  layout: 'mine'
}

四、components目录

components组件文件夹

建议所有的组件都写到这个目录,虽然也可以写到pages里面目录下,但是不利于后面生成站点地图文件sitemap.xml

否则还需要特殊处理,因为站点地图会根据路由自动生成,路由又是根据pages下所有文件/文件夹自动生成的。

所有组件最好不要写到pages目录下。

五、assets/static目录

assets和static都用于放置静态资源,但是它们又有什么区别呢?

assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript

static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt

在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

六、store目录

store 目录用于Nuxt的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。

七、middleware目录

middleware 存放应用的中间件

八、plugins目录

plugins 放置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件

九、nuxt.config.js配置

进行全局、打包等相关配置。


1、head,进行全局的页面头部配置,可以配置titlemetakeywords等等

2、plugins,进行插件配置

后面推出更详尽的配置说明

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注