Difference between revisions of "Nuxt.JS Directory Structure"

From WikiOD
Line 15: Line 15:
 
The middleware directory is used to store application middleware.
 
The middleware directory is used to store application middleware.
  
[https://www.nuxtjs.cn/guide/views#%E5%B8%83%E5%B1%80 More Page directory about middleware]
+
[https://nuxtjs.org/docs/2.x/components-glossary/pages-middleware More Page directory about middleware]
  
 
===== Page directory =====
 
===== Page directory =====

Revision as of 09:54, 24 August 2021

Resource catalog

Asset directory assets are used to organize uncompiled static resources such as LESS, SASS or JavaScript.

More information about the assets director

Component catalog

The component catalog components is used to organize the Vue.js components of the application. Nuxt.js will not extend and enhance the Vue.js components in this directory, that is, these components will not have the characteristics of the asyndeta method like page components.

Layout directory

The layout directory layouts is used to organize the layout components of the application.

additional configuration, the directory cannot be renamed.

Middleware catalog

The middleware directory is used to store application middleware.

More Page directory about middleware

Page directory

Page directory pages are used to organize application routing and views. The Nuxt.js framework reads all the .vue files in this directory and automatically generates the corresponding routing configuration.

Without additional configuration, the directory cannot be renamed.

More information about the page

Plug-in directory

The plugin directory plugins is used to organize JavaScript plugins that need to be run before the root vue.js application is instantiated.

More information about plugins

Static file directory

The static file directory static is used to store static files of the application. Such files will not be used by Nuxt.js to call We pack for building and compiling. When the server starts, the files in this directory will be mapped to the root path / of the application.

For example: /static/robots.txt maps to /robots.txt

Without additional configuration, the directory cannot be renamed.

More information about static files

Store directory

The store directory is used to organize the Vuex state tree  files of the application  . The Nuxt.js framework integrates the  relevant functional configurations of the  Vuex state tree . Create an index.js file in the store directory to activate these configurations.

Without additional configuration, the directory cannot be renamed.

More information about store

nuxt.config.js file

The nuxt.config.js file is used to organize the personalized configuration of the Nuxt.js application so as to override the default configuration.

Without additional configuration, the file cannot be renamed.

More information about nuxt.config.js

package.json file

The package.json file is used to describe the dependencies of the application and the script interface exposed to the outside.

The file cannot be renamed.

Alias
Alias Catalogue
~ Or @ srcDir
~~ Or @@ rootDir

By default, srcDir and rootDir are the same.

Tip: In your vue template, if you need to import assets or static directories, use ~/assets/your_image.png and ~/static/your_image.png methods.