nuxt.js 通用 vue.js SSR
SSR : 服務(wù)器端 vue渲染 html 返回瀏覽器
SEO ： VUE SPA（單頁） 新聞 博客 等網(wǎng)站
APA ： 快遞

環(huán)境：
vue init nuxt-community/starter-template testDemo

PS D:\NuxtProject> vue init nuxt-community/starter-template testDemo

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

npm install -g @vue/cli-init
當(dāng)前用的Vue@cli3 創(chuàng)建nuxt項目用的是Vue-cli2的命令所以要下載一個包兼容
根據(jù)提示創(chuàng)建項目
npm install
npm run dev
如果需要配置特定的IP地址、或者3000端口被占用
在package.js配置文件中添加

  "config": {
    "host":"47.101.198.221",
    "port":"1818"
  },

具體位置請參考：

{
  "name": "nuxt_01",
  "version": "1.0.0",
  "description": "huangfu is project",
  "author": "xzh.hf <xzh.hf@hangshutech.com>",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "config": {
    "host":"47.101.198.221",
    "port":"1818"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

保存修改的配置文件 重新npm run dev啟動項目昙读；

項目中引入全局css樣式（每個頁面都需要引入的css文件）
在nuxt.config.js進(jìn)行添加

css:['~assets/css/index.css'],

具體位置參考:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt_01',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'huangfu is project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css:['~assets/css/index.css'],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** 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)/
        })
      }
    }
  }
}

項目目錄：

image.png

路由：

nuxt 會根據(jù)目錄結(jié)構(gòu)自動生成路由文件.nuxt/router.js
about/index.vue

<template>
    <div>
        <h2>about index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

路由傳參：pages/index.vue

<template>
  <div>
    <ul>
      <li> <nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
      <li> <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
      <li> <nuxt-link :to="{name:'news',params:{newsId:71}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>

動態(tài)路由 news/_id.vue固定命名格式：下劃線+動態(tài)路由名稱

<template>
    <div>
        <h2>News-content</h2>
        <p>newsId: {{$route.params.id}}</p>
        <li> <nuxt-link :to="{name:'news'}">news</nuxt-link></li>
    </div>
</template>

<script>
export default {
    validate({params}) {
        return /^\d+$/.test(params.id)
    }
}

</script>

動態(tài)路由傳參 /news/index.vue
對路由名稱不清楚可以到router.js 中查看

<template>
    <div>
        <h2>news index page</h2>
        <p>NewsID:{{$route.params.newsId}}</p>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
            <li><nuxt-link :to="{name:'news-id',params:{id:123}}">123</nuxt-link></li>
            <!-- <li><a href="/news/123">123</a></li> -->
            <li><a href="/news/456">456</a></li>
            <!-- <li><a href="/news/huafn">huafn</a></li> -->
            <!-- <li><a href="/news/huiyan">huiyan</a></li> -->
        </ul>
    </div>
</template>

路由跳轉(zhuǎn)動畫效果

assets/css/index.css index.css文件的引入上面有介紹

html {
    color: purple;
}
/* 項目所有頁面的效果 */
.page-enter-active, .page-leave-active {
    transition: opacity 0.5s;
}

.page-enter , .page-leave-active {
    opacity: 0;
}

/* 某個頁面單獨定義的動畫效果 */
.test-enter-active, .test-leave-active {
    transition: all 0.5s;
    font-size: 12px;
}

.test-enter , .test-leave-active {
    opacity: 0;
    font-size: 40px;
}

添加：transition: 'test'

<template>
    <div>
        <h2>about index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

<script>
export default {
    transition: 'test', //與css中定義的名字保持一致
    data () {
        return {
        };
    },
}

三反璃、添加默認(rèn)模板

項目根目錄添加 app.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{ HEAD }}
</head>
<body>
    <p>huangfushengkun@163.com</p> //所有頁面都顯示的固定內(nèi)容
    {{ APP }}
</body>
</html>

注意：添加完成后惧浴，重啟服務(wù)模板生效

四困鸥、默認(rèn)布局

layouts/default.vue

<template>
  <div>
    <p>sunhuiyan.163.com</p>  //所有頁面添加的默認(rèn)布局
    <nuxt/>
  </div>
</template>

區(qū)別： 1.可以熱更新2.只能定義template標(biāo)簽中的內(nèi)容