nuxt.js目录结构分析解释

客官°小女子只卖身不卖艺 2021-09-19 14:02 367阅读 0赞

nuxt.js目录结构

### `assets`  ###

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

### `components` ###

组件目录 `components` 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 `asyncData` 方法的特性。

### `layouts` ###

布局目录 `layouts` 用于组织应用的布局组件。该目录名为Nuxt.js保留的，不可更改。

### `middleware` ###

`中间件目录middleware` 用于存放应用的中间件。

### `pages` ###

页面目录 `pages` 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 `.vue` 文件并自动生成对应的路由配置。该目录名为Nuxt.js保留的，不可更改。

### `plugins` ###

插件目录 `plugins` 用于组织那些需要在 `根vue.js应用` 实例化之前需要运行的 Javascript 插件。比如：element UI的scss样式文件（样式分割配置，常量定义），以及element UI的引入逻辑代码等等；

scss文件

/* 改变主题色变量 */
    $--color-primary: #00b1f5;
    $--color-success: #7bca0f !default;
    $--color-warning: #ff8b02 !default;
    $--color-danger:  #fe3440 !default;
    
    /* 改变 icon 字体路径变量，必需 */
    $--font-path: '~element-ui/lib/theme-chalk/fonts';
    
    @import "~element-ui/packages/theme-chalk/src/index";
    @import "~element-ui/packages/theme-chalk/src/display";

js文件

import Vue from 'vue';
    import Element from 'element-ui';
    import './element-variables.scss';
    
    Vue.use(Element);

### `static` ###

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