最近公司要重构公司官网,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上面格式下,因为没有仔细看文档差点把我逼疯,

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

  

小谢第58问:nuxt搭建企业官网的更多相关文章

  1. 基于 Azure IaaS 搭建企业官网的规划和实践

    本课程主要介绍了基于 Azure IaaS 搭建企业官网的案例分析和实践,实践讲解如何使用 Azure 门户创建虚拟机, 创建虚拟网络, 创建存储账户等. 具体包括项目背景介绍, 项目架构, 准备和实 ...

  2. Windows Azure HandBook (7) 基于Azure Web App的企业官网改造

    <Windows Azure Platform 系列文章目录> 1.用户场景: C公司是全球大型跨国连锁餐厅,在世界上大约拥有3万间分店.其IT系统主要部署其海外数据中心,或者租用其他ID ...

  3. 巧用百度Site App新组件为企业官网打造移动站

    一年前我曾经详细介绍过百度Site App,时隔一年的发展,Site App再一次发生了翻天覆地的变化:自定义程度更高.新增电话地图组件.增加流量统计.增加广告管家.生成APP客户端等功能,百度Sit ...

  4. MIP技术进展月报第3期:MIP小姐姐听说,你想改改MIP官网?

    一. 官网文档全部开源 MIP 是一项永久的开源的项目,提供持续优化的解决方案,当然官网也不能例外.从现在开始,任何人都可以在 MIP 官网贡献文档啦! GitHub 上,我们已经上传了 <官网 ...

  5. 企业官网Web原型制作分享-Tesla

    Tesla是汽车行业知名的奢华品牌,产品为纯电动汽车,知名度极高.此模板正是取自Tesla的官网,高端大图配上文字排版,彰显了汽车的奢华感觉. 本原型由国产Mockplus(原型工具)和iDoc(智能 ...

  6. 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题

    1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...

  7. 小谢第8问:ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  8. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  9. 小谢第6问:js中,filter函数是怎么使用的

    数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...

随机推荐

  1. 树状数组(BIT)—— 一篇就够了

    树状数组(BIT)-- 一篇就够了 前言.内容梗概 本文旨在讲解: 树状数组的原理(起源,原理,模板代码与需要注意的一些知识点) 树状数组的优势,缺点,与比较(eg:线段树) 树状数组的经典例题及其技 ...

  2. MeteoInfo 新网站

    MeteoInfo特别是MeteoInfoLab的推广需要写大量详细的帮助文档和示例程序,MeteoInfo原先的网站使用最原始的编写.html文件的方式来更新,效率实在太低,最近学习了一下Sphin ...

  3. 智能指针(1)-std::unique_ptr

    std::unique_ptr std::unique_ptr是一种几乎和原始指针一样高效的智能指针,对所管理的指针资源拥有独占权.由C++11标准引入,用于替代C++98中过时的std::auto_ ...

  4. Warning: Permanently added the RSA host key for IP address '52.74.223.119' to the list of known hosts.

    如果出现这个问题,说明你的github缺少公钥 使用 ssh -T git@gtihub.com 去测试 1.生成密钥 ssh-keygen -t rsa -C "your name&quo ...

  5. python算法常用技巧与内置库

    python算法常用技巧与内置库 近些年随着python的越来越火,python也渐渐成为了很多程序员的喜爱.许多程序员已经开始使用python作为第一语言来刷题. 最近我在用python刷题的时候想 ...

  6. 【C语言学习笔记】C语言函数执行成功时,返回1和返回0,究竟哪个好?

    基本上,没有人会将大段的C语言代码全部塞入 main() 函数,更好的做法是按照复用率高,耦合性低的原则,尽可能的将代码拆分不同的功能模块,并封装成函数.C语言代码的组合千变万化,因此函数的功能可能会 ...

  7. 【UNR #2】UOJ拯救计划

    UOJ小清新题表 题目内容 UOJ链接 题面太长了(其实是我懒得改LaTeX了) 一句话题意: 给出 \(n\) 个点和 \(m\) 条边,对其进行染色,共 \(k\) 种颜色,要求同一条边两点颜色不 ...

  8. monolog 日志

    1 安装 composer require monolog/monolog 2 使用 // 创建日志服务 $logger = new Logger('my_logger'); // 定义一个handl ...

  9. centos7下面 es7.5 搭建

    centos6 搭建 参考 https://www.cnblogs.com/php-linux/p/8758788.html 搭建linux虚拟机 https://www.cnblogs.com/ph ...

  10. Business Partner - 供应商与客户的集成 - S/4HANA(1)

    本文基于S/4HANA 1511版本,同时大部分内容适用于S/4HANA i.e1610/1709/1809. 本文旨在为全新实施的BP配置,或从ECC到S/4HANA的供应商客户主数据迁移提供信息支 ...