• 小谢第58问:nuxt搭建企业官网


      最近公司要重构公司官网,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为引入插件时候使用,比如swiperanimatewowjs等等,以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上面格式下,因为没有仔细看文档差点把我逼疯,

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

      

  • 相关阅读:
    结对编程作业
    4组-Alpha冲刺-2/6
    4组-Alpha冲刺-1/6
    结对编程作业
    4组 团队展示
    python多进程遇到的问题和解决
    GNS3第一次ping通
    前缀表达式计算(栈的使用)
    欧拉筛法(线性筛)素数
    拓扑排序
  • 原文地址:https://www.cnblogs.com/xieoxie3000question/p/13996324.html
Copyright © 2020-2023  润新知