Brief introduction

Nuxt.js is a server-based rendering Vue.js application framework came into being.

How Nuxt.js frame work?

Nuxt.js incorporates the following components / framework for developing a complete and powerful Web applications:

View 2
View-Router
Vuex (only introduced when configured Vuex state tree configuration items)
Vue rendering server (using negative mode: 'spa')
Vue-Meta

flow chart

installation

Make sure the npx (npx in NPM version 5.2.0 installed by default):

$ npx create-nuxt-app <项目名>

It will enable us to make some choices, then turn finished selecting, when finished running, it will install all the dependencies, so the next step is to start the project:

$ cd <project-name>
$ npm run dev

Browser and enter http: // localhost: 3000 / can look at the following

Directory Structure

1. Resource Directory

Static resource directory resource assets for organizations such as non-compiled LESS, SASS or JavaScript.

2. Component Catalog

Component catalog components used to organize Vue.js component applications. Nuxt.js does not expand the directory Vue.js enhancement components that these components are not characteristics that have asyncData method as page components.

3. layout directory

Layout layout components directory layouts for tissue applications. If there is no additional configuration, the directory can not be renamed.

4. Middleware directory

middleware directory for storing application middleware.

The page directory

Page catalog pages for routing and view organizational applications. Nuxt.js .vue frame read all files in the directory and automatically generate a corresponding routing configuration. If there is no additional configuration, the directory can not be renamed.

6. plugin directory

Plugins directory plugins Javascript plugins for organizations that need to run before the root vue.js application instantiated.

7. static files directory

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt。若无额外配置，该目录不能被重命名。

8.Store 目录

store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。若无额外配置，该目录不能被重命名。

9.nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名。

10.package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。该文件不能被重命名。

实践

新建页面pages/my.vue

<template>
  <p>my page</p>
</template>
<script>
export default {
  name: "my"
};
</script>

浏览器输入http://localhost:3000/my，显示如下

新建模板layouts/my.vue

<template>
  <div>
    <nuxt />
    <p>my layout</p>
  </div>
</template>
<script>
export default {
  name: "my"
};
</script>

在pages/my.vue里引用模板my,如果不显示设置layout，则默认引用layouts/default.vue

<template>
  <p>my page</p>
</template>
<script>
export default {
  name: "my",
  layout: "my"
};
</script>

浏览器输入http://localhost:3000/my，显示如下

nuxt study notes