Nuxt之目录结构与常用配置

一. 目录结构

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件复制代码

二. 常用配置项

• 配置IP和端口：

找到根目录下的package.json文件，增加以下配置，然后npm run dev

"config": {
  "nuxt": {
    "host": "127.0.0.1",
    "port": "8080"
  }
}复制代码

• 配置全局CSS

开发过程中，我们常常会去配置全局的CSS，来初始化我们的页面渲染，比如font，padding，margin，常用class等，这些都需要我们在  nuxt.config.js 中配置，同时一般我们在会把这些文件放在assets目录下，如创建在assets目录下创建文件common.css

/assets/css/common.css

body {
    color: red;
}复制代码

/nuxt.config.js

css:['~assets/css/normailze.css']
复制代码

完成后，npm run dev 查看效果

• 配置loaders

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

build: {
  loaders: [
    {
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: "url-loader",
      query: {
        limit: 10000,
        name: 'img/[name].[hash].[ext]'
      }
    }
  ]
}复制代码

本文引用于技术胖nuxt教程，感谢胖哥