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
,进行全局的页面头部配置,可以配置title
、meta
、keywords
等等
2、plugins
,进行插件配置
后面推出更详尽的配置说明正文结束
Ctrl + Enter