最近公司要重构公司官网，jq+bootstrap 改为了vue，刚开始我以为用vue不是挺好的嘛，后来才发现，有于vue单页面的特性，不利于搜索引擎的抓取，因此在seo方面需要另外想办法，于是乎，就找到了nuxt,然后在项目应用的过程中，发现网上有各式各样的讲解，但是很多是过时的坑，于是。。。

　　1、nuxt:是服务端渲染，并且具有生成静态文件的功能，这就大大提高了seo,

　　2、安装：官网给了两种方法，一种从零开始创建，一种是用npx或者yarn直接创建，我用npx装的时候可能是网速原因，一直报错，因此用了yarn安装

　　3、安装完成后进入目录，npm run dev启动

　　4、我在这里是在layout文件夹下default页面里讲做好的的header和foote塞进去,然后在page下写的页面可以直接构建页面的

　　5、plugin为引入插件时候使用，比如swiper\animate\wowjs等等，以nuxt中使用swiper为例：

　　先装swiper插件npm install –save vue-awesome-swiper

　　引入第三方插件一般放置到plugins目录下

　　创建swiper.js  （注意swiper的css样式因为版本的原因可能会变 ，这里引入如果不成功可以去node_module文件下看一下此路径下

/swiper/dist/css/swiper.css有无css文件，animate其他插件同理，楼主为此踩了好久的坑）
import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

　　接着在nuxt.config.js的plugins里配置

plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

　　之后就可以按照文档使用了

     6、另一个是vuex的使用，注意常用的经典模式已经不能使用了，要按照nuxt上面格式下，因为没有仔细看文档差点把我逼疯，

 

 

 其他的会在之后继续写的，今天先这样了

　　

版权声明：本文为xieoxie3000question原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xieoxie3000question/p/13996324.html