Nuxt.js-Vue项目PC端SEO推广

2018-11-29  本文已影响0人  leesession

Nuxt.js主要用在vue做PC端推广时用,因为vue的单一页面原则,使得其做SEO时并不好,下面简单介绍下,自己用时的流程-操作。

1.安装 vue-cli
npm install vue-cli -g
2.使用 vue安装 nuxt
vue init nuxt/starter
3.生成项目
npm install && npm run dev , 打开 localhost:3000 窗口即可查看
4.nuxt的项目目录
在文件下面有 README.md可自行查看其作用
5.常用配置:
① IP与端口在 packge.json 中加入

"config": {
   "nuxt": {
     "host": "127.0.0.1",//默认主机 loaclhost
     "port": "3002"//你的端口号
   }
 }

②全局CSS
assets/css/目录下创建一个css ,在 nuxt.config.js中引入,例如:
css:['~assets/css/global.css'],
配置webpack的loader , nuxt.config.js的build选项里进行配置,例如:现在我们要配置一个url-loader来进行小图片的64位打包

build: {
    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:'img/[name].[hash].[ext]'
        }
      }
    ],

4.路由配置
在nuxt.js中,像vue-clic中的 router/index.js已经没有了,它会自动给你创建。在 pages文件夹下面来创建。
直接创建vue,路由如:http://localhost:3002/ansyData
在pages下创建路由,下创建vue文件,如:pages/index/index.vue,这样的路由,如:http://localhost:3002/index/index
5.路由跳转
<nuxt-link :to="{name:'index'}">HOME</nuxt-link>
<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
这里也可以用 path/query,跟vue一样
6.动态路由
比如我做新闻:在pages/news文件夹下面新建了_id.vue的文件,在跳转之前 <nuxt-link :to="{path:'/news/456'}">News-3</nuxt-link>,我把456传到 _id.vue中,这样取出: {{$route.params.id}}
7.路由动画
动画分为:全局动画-局部动画(使用什么效果自己定义)。全局动画,例如:我刚才配置的global.css中添加下面代码,就成功:

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

局部动画,也在global.css中配置,添加如下代码(我用test):

.test-enter-active, .test-leave-active {
  transition: all 2s;
  font-size:12px;
}
.test-enter, .test-leave-active {
  opacity: 0;
  font-size:40px;
}

在写入成功后,进入所需引入的页面引入,transition:'test',与data(){}同级
8.默认模板-默认布局
默认模板:根目录下创建一个app.html,{{ HEAD }}读取的是nuxt.config.js里的信息,{{APP}} 就是我们写的pages文件夹下的主体页面

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>leesession.com 固定内容</p>
    {{ APP }}
</body>
</html>

默认布局:根目录下的layouts/default.vue,如:

<template>
  <div>
    <p>固定内容</p>
    <nuxt/>
  </div>
</template>

9.Nuxt的错误页面和个性meta设置
错误页面:layouts文件夹下建立一个error.vue,可以默认这样写

<template>
  <div>
      <h2 v-if="error.statusCode==404">404页面不存在</h2>
      <h2 v-else>500服务器错误</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>
<script>
export default {
  props:['error'],
}
</script>

meta设置:在每个vue页面中,都有一个head方法来让我们改变title以及content:

//独立设置head信息
  head(){
      return{
        title:this.title,//页面的title
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]//hid是覆盖,
      }
    }

10.asyncData方法获取数据
nuxt增加了anyncData,直接调用就行,例如:

   async asyncData(){
      let {data}=await axios.get(url)
      return {info: data}
  }

11.静态资源和打包
图片:<img src="~static/logo.png" /> ~指向根目录
背景图:background-image: url('~static/logo.png') 同理
打包静态HTML并运行:npm run generate ,然后在dist文件夹下输入live-server就可以了。

上一篇 下一篇

猜你喜欢

热点阅读