1.接下来新建/component/maincontent.vue

把这些html代码copy到maincontent.vue

发现格式比较难看,就格式化一下

2.插件安装 beautify,安装后重启vs,按F1 搜beaut,格式化html

把css copy过来 刷新

样式有点问题。原来少了bootstrap.css,修改nuxt.confg.js增加bts

Npm run dev 发现报错,原来bootstrap加载了字体 但项目里没有包含,

把字体copy过来放到目录 重新npm run dev

正常了

接下来按照上面的方式,把剩下 的maincontent都完善起来。

这样就把maincontent完成了,接下来把footer.vue也实现

这样一个纯静态的nuxt+vue 就完成了,查看源代码

就会发现和纯vue的区别,纯vue是没有文本的,所以对seo不利

6.【nuxt起步】-完成一个静态的页面的更多相关文章

  1. 使用 Eclipse 创建一个静态的登录页面

    要求: 使用 Eclipse 创建一个静态的登录页面 实现步骤: 在 Eclipse 中,点击"File",显示菜单,选择"New" "Other&q ...

  2. 利用PHP的ob函数实现生成静态化页面

    之前用过一些开源的CMS管理系统,当时就很好奇后台中的生成HTML静态文件是怎么实现的.今天和同事讨论了下,没想到同事之前做过这类的生成静态页面的功能,果断向他请教了下. 经他讲解后,才知道其实生成静 ...

  3. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  4. 用php生成静态html页面(通用2种方法)

    因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求 对于一个访问量可能达百万千万级别的网站来说 这无疑是服务器一个大大的负担 所以把动态数据转换成静态html页面就成了节省人力物力的首选 因 ...

  5. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  6. 开发日志系列:一个表单页面的呈现与提交(一)——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  7. [转] 两个静态html页面传值方法的总结

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/csdn_ds/article/details/78393564 问题 因最近尝试实现客户端与服务端分 ...

  8. 谈谈iOS开发如何写个人中心这类页面--静态tableView页面的编写

    本文来自 网易云社区 . 一.本文讲的是什么问题? 在开发 iOS 应用时,基本都会遇到个人中心.设置.详情信息等页面,这里截取了某应用的详情编辑页面和个人中心页面,如下: 我们以页面结构的角度考虑这 ...

  9. 静态web页面与动态web页面的区别

    一.静态web页面 在静态web程序中,客户端使用web浏览器经过网络连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务区我现在需要得到哪个页面,所有的请求交给web服务器,之后 ...

随机推荐

  1. UVa 11695 树的直径 Flight Planning

    题意: 给出一棵树,删除一条边再添加一条边,求新树的最短的直径. 分析: 因为n比较小(n ≤ 2500),所以可以枚举删除的边,分裂成两棵树,然后有这么一个结论: 合并两棵树后得到的新树的最短直径为 ...

  2. Freemarker的循环通过assign指令引入计数变量

    这里是一个jeecms框架的前台的一个内容列表集,因为不是每个内容子项符合要求,而且需要统计符合要求的子项个数,仿照java的for循环,需要在循环前声明一个计数变量,这就需要使用Freemaker的 ...

  3. Java项目引入eclipse注意事项

    我以前也搞过java,后转前端,接触html+css+js时间比较多,所以java后端也忘了差不多.最近负责公司的邮件系统项目,项目是java语言写,项目架构比较复杂,在部署项目的时候,遇到了很多问题 ...

  4. Leetcode207--->课程表(逆拓扑排序)

    题目: 课程表,有n个课程,[0, n-1]:在修一个课程前,有可能要修前导课程: 举例: 2, [[1,0]] 修课程1前需要先修课程0 There are a total of 2 courses ...

  5. [Oracle] Lob介绍

    [Oracle] Lob介绍   像Oracle这种关系型数据库,比较擅长处理结构化的数据,那么对于非结构化的数据,Oracle是怎么处理和存储的呢?Lob (Large Object)是Oracle ...

  6. 精通CSS高级Web标准解决方案(1-3 规划、组织与维护样式表)

    对文档应用样式 对代码进行注释/*......*/ 结构性注释 自我提示 删除注释.优化样式表 样式指南:解释代码与站点的视觉设计是如何组织在一起的 站点结构.文件结构.命名规则 编码标准:(X)ht ...

  7. 基于 K8S 构建数据中心操作系统

    在 12 月 22 日 ECUG 的下午场 ,七牛云容器计算部技术总监袁晓沛为大家带来了主题为<基于 K8S 的 DCOS 之路>的精彩分享,向大家介绍了七牛容器云目前 K8S 的状况和产 ...

  8. HDU——2602Bone Collector(01背包)

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  9. ACM程序设计选修课——1040: Alex and Asd fight for two pieces of cake(YY+GCD)

    1040: Alex and Asd fight for two pieces of cake Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 27   ...

  10. [CODEVS1916] 负载平衡问题(最小费用最大流)

    传送门 输入所有 a[i],求出平均值 sum,每个 a[i] -= sum 那么如果 a[i] > 0,从 s 向 i 连一条容量为 a[i] 费用为 0 的有向边 如果 a[i] < ...