码迷,mamicode.com
首页 > 其他好文 > 详细

6.完成一个静态的页面

时间:2018-11-30 15:43:12      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:one   conf   格式化   技术分享   文本   run   分享图片   src   tst   

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

 技术分享图片

把这些html代码copymaincontent.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.完成一个静态的页面

标签:one   conf   格式化   技术分享   文本   run   分享图片   src   tst   

原文地址:https://www.cnblogs.com/kobewang/p/10043924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!