[TOC]
1、Nuxt詳細なディレクトリ構造
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-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作 |-- package.json // npm包管理配置文件 2、Nuxt共通の設定項目
設定IPとポート
開発は、しばしば遭遇ポートが使用中であるか、IPのを指定します。私たちは、ルートディレクトリに設定項目のpackage.jsonを設定する必要があります。たとえば、今、私たちは、IP 127.0.0.1、ポート1818を設定したいです。
/package.json
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818" } }, 
グローバルCSSの設定
複数ページのプロジェクトの開発では、このようなパディングとマージンが0に設定されているように、ページのレンダリングを初期化するために非常によく知られているオープンソースのCSSファイルnormailze.cssをグローバルCSSを定義します
インストールするには、コマンドを使用しますnpm install normalize.css。
グローバルコンフィギュレーション、nuxt.config.jsで動作させる必要があります
/assets/fontcolor.css
html{
color:red;
}
/nuxt.config.js
css:[`~assets/fontcolor.css`]
新しいページ、ちょうど書き込み何かのページでは、良い仕事Nuxt.jsへのパスを設定しないでください
グローバルコンフィギュレーションテイク効果
コンフィギュレーション・ローダーのWebPACK
私たちは今、64梱包の小さな画像へのURL-ローダーを設定するなど、基本的な設定のWebPACKにnuxt.config.jsで覆われています。これは、ビルドオプションnuxt.config.jsの中で設定することができます。
最初のURLローダーをインストール
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)/ }) } } } WebPACKのは何ですか
WebPACKのパッカーモジュールを見ることができます：それは、単純に変換し、ブラウザが適切な形式を使用するための包装、プロジェクトの構造を分析JavaScriptなどの言語を展開し、いくつかの他のブラウザを直接実行することはできません見つけることです。
ローダ：前処理モジュールは、モジュール内に導入される前に、WebPACKのに使用されるが、それは、コンテンツ処理モジュールローダの使用を進めます。デフォルトのWebPACK jsのコードは唯一、私たちはゾーンにしたいときに他のパック、扱うコンテンツの他のタイプのWebPACKの取引をできるようになる、対応するローダーを使用する必要があります
3、Nuxtルーティング構成およびパラメータ渡し
3.1、Nuxtルーティング構成
路由就是我们的跳转机制，可以理解为链接跳转，体现我们的业务逻辑，把模块串联起来，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> 测试：
