Boostrap:
Vuejs:
首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：
接着就可以开始尝试用boostrap 教程 和Vuejs来实现。
1、首先我们在 <head> 中先引入boostrap和Vue
js，其中顺序不要变：
2、 顶端文字跑马灯效果：
然后在CSS样式中，设置 news 的 float 和 width :
最后在js中写跑马灯的实现，用定时器 timer 来计时滚动，判断复制的信息是否到达 box 的最左边来进行无限循环。
3、 导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class= navbar-nav 类； 然后在 <li> 元素上添加 nav-item 类， <a> 元素上使用 nav-link 类；
导航栏可以用 bg-dark 和 navbar-dark 来设置导航的样式：
其中， navbar-brand 类用于显示品牌logo，如果使用，可以使用 navbar-brand 类来设置自适应导航栏:
效果如图：
4、 轮播 ：
查阅Boostrap教程，大概了解到有这几个类：
实现效果如图：
5、 网格
我们可以结合网格和 Bootstrap4 的 card 与 card-body 类来创建一个简单的卡片：
实现效果如图：
6、 折叠
实现效果如图：
7、 链接列表组
实现效果如下：
8、最后再增加一个页尾，然后完善下就完成了一个公司页面：
页尾效果如图：
整个网页最后的实现效果为：
[上传失败(image-6307a3-1628321072949)]
1、Boostrap和vuejs提供的组件很丰富而且实现起来很容易，值得深入学习。
2、vuejs还需要再深入学习下，在这里只用到了一点点。
译文： >Vuejs是当下很火的一个JavaScript MVVM库，
它是以数据驱动和组件化的思想构建的。 相比于Angularjs，Vuejs提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vuejs。
不知道你有没有发现，vue做的网站除了首页以外，其他页面根本就不能被百度收录。以至于有很多做seo的同事痛斥其种种不是，最后被强迫改为不分离开发。
至于vue的详情页为什么不能被百度收录，这就涉及到了spa的核心概念，因为数据都是异步获取来的，前端根本就没有所谓的纯静态一说。通俗点讲就是，页面都是js通过ajax获取到数据以后，动态生成的。既然它本来就没有一个文件放在服务器上，当然，爬虫也就不能获取到这个静态的url地址了。
但是url静态地址又是做seo必须的东西
所以今天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。本地开发的时候，使用vue语法，模块化你的项目，然后发布的时候生成静态，把ajax获取来的内容转化成静态html以利于seo。真正实现模块化和静态化两不误！
首先说明一下，龙哥本地的nuxt环境是281。如果你的版本号和我的不符，可能有部分语法你需要参考官方API开发手册。
使用命令：
小知识：啥是npx？
我们以前不是用的npm吗，但是这货每次安装东西的时候，你还得给全局装一个-g，相当于你电脑里老得有这个服务。
但其实你项目中已经包含了运行时候所需要得所有东西了。
如果你用了npx，他不会给你装这个东西，而是装得时候用一下，用完了就卸载，效率更高。
npx是nodejs在50版本以后新加入的，非常牛逼。
所以我们现在来cnpm -g 那一步都不需要了，我们直接npx创建项目即可！！！
直接输入
注意这里有可能报错，不用管他，过个几秒就安装好了。
还有一个需要注意的地方，你的git版本不能低于217否则后面有几个需要arrow选择得地方你可能选不了，请升级你的git版本。
然后就可以开始安装了。
等你看到这个界面，就是安装好了。
他会自动安装所需要得所有包，安装完了以后你进入localhost:3000
出现这个界面，就OK了
链接：>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）