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教程，感謝胖哥