Nuxt.js Learning (II) --- Nuxt Detailed directory structure, Nuxt common configuration items, Nuxt routing configuration and parameter passing

[TOC]

1, Nuxt Detailed Directory Structure

Nuxt project file directory structure

|-- .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-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作 |-- package.json // npm包管理配置文件 

2, Nuxt common configuration items

Configuring IP and port

Development often encounter port is in use or specify the IP's. We need to configure your config items package.json in the root directory. For example, now we want to configure the IP 127.0.0.1, port 1818.

/package.json

"config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818" } }, 

Configuring Global CSS

In the development of a multi-page project will define a global CSS to initialize our page rendering, such as the padding and margin is set to 0, very well-known open source css file normailze.css

Use command to install npm install normalize.css.

Global configuration, it is necessary to operate in nuxt.config.js

/assets/fontcolor.css

html{
    color:red;
}

/nuxt.config.js

  css:[`~assets/fontcolor.css`]

pages in a new page, just write something, do not configure the path to a good job Nuxt.js

Global configuration take effect

The configuration loader webpack

It is covered in nuxt.config.js in the basic configuration webpack, such as we now want to configure a url-loader to a small picture of 64 packing. It can be configured in the build options nuxt.config.js's.

First install url-loader

npm install --save-dev url-loader

build: {

    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader", query:{ limit:10000, name:'img/[name].[hash].[ext]' } } ], /* ** Run ESLint on save */ extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } 

What is Webpack

WebPack packer module can be seen: it simply is to analyze your project structure, expand language such as JavaScript, and find some other browser can not run directly, converting and packaging for the browser to use an appropriate format.

loader: preprocessing module is used webpack, before being introduced into a module, it will advance the use of the content processing module loader. The default webpack js code will only deal, so when we want to zone packed else, let webpack deal with other types of content, it is necessary to use the corresponding loader

3, Nuxt routing configuration and parameter passing

3.1, Nuxt routing configuration

路由就是我们的跳转机制，可以理解为链接跳转，体现我们的业务逻辑，把模块串联起来，Nuxt.js的路由，它给我们进行了封装，让我们节省了很多配置环节。

在根目录的pages文件下新建两个文件夹，用于测试

about/index.vue

<template>
  <div>
    <h2>About Index page</h2> <ul> <li> <nuxt-link to="/">Home</nuxt-link> </li> </ul> </div> </template> <script> export default {}; </script> <style> </style> 

news/index.vue

<template>
  <div>
    <h2>News Index page</h2> <ul> <li> <nuxt-link to="/">Home</nuxt-link> </li> </ul> </div> </template> <script> export default {}; </script> <style> </style> 

修改之前pages文件夹下的index，删除多余代码。Nuxt.js推荐使用<next-link>标签(vue中叫组件)进行路由跳转

<template>
  <div>
    <ul> <li> <nuxt-link :to="{name:'index'}">Home</nuxt-link> <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link> <nuxt-link :to="{name:'news'}">NEWS</nuxt-link> </li> </ul> </div> </template> <script> export default { components: {} }; </script> <style> </style> 

这个实在是太方便了，因为Nuxt.js都为我们做好了，不用写任何配置代码。

官方文档：

如果你的路由是有文件夹嵌套的话，Nuxt是用使用-来拼接路由的name名称的(如:about-index1)，但是文件夹内部的index.vue会直接已文件夹的名字作为name。

测试效果：

3.2、Nuxt参数传递

和vue类似，我们用params来传递参数

实例代码

修改上pages/index，传递name

<template>
  <div>
    <ul> <li> <nuxt-link :to="{name:'index'}">Home</nuxt-link> <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link> <nuxt-link :to="{name:'news',params:{name:'庭前云落'}}">NEWS</nuxt-link> </li> </ul> </div> </template> <script> export default { components: {} }; </script> <style> </style> 

news/index.vue

和vue接收是一模一样

<template>
  <div>
    <h2>News Index page</h2> <p>name:{{$route.params.name}}</p> <ul> <li> <nuxt-link to="/">Home</nuxt-link> </li> </ul> </div> </template> <script> export default {}; </script> <style> </style> 

测试：

来源：http://www.1994july.club/seorumen/