Nuxt.js开启SSR渲染的教程详解(2)

日期：2020-05-11 栏目：程序人生浏览：次

（5）在浏览器输入 localhost:3000,可以看到结果。

第三节：Nuxt目录结构

第四节：Nuxt常用配置项

1.配置IP和端口

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。

/package.json

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

配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1000.

2.配置全局CSS

在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。

比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

/assets/css/normailze.css

html{
 color:red;
}

/nuxt.config.js
 css:['~assets/css/normailze.css'],

设置好后，在终端输入npm run dev 。然后你会发现字体已经变成了红色。

3.配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

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)/
  })
  }
 }
 }

第五节：Nuxt的路由配置和参数传递

Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

1.简单路由Demo

我们现在根目录的pages文件下新建两个文件夹，about和news（模仿关于我们和新闻的功能模块）。

（1）在about文件夹下新建index.vue文件，并写入下面的代码：

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

转载注明出处：http://www.heiqu.com/286.html

Nuxt.js开启SSR渲染的教程详解(2)

相关推荐