您的位置：首页 > 百科管理 > 详情

vue设计门户网页-基于Boostrap和Vue设计网页

原创：找图网 2023-04-18 22:22:44

Primary:Vue{三、一个基于Vue的门户网站(经验踩坑)}

使用框架时必须熟知框架指令特性!很重要;

Bootstrap+jQuery是很好的选择!

库: 1.i18n(双语言切换);

2.vue-router(路由);

3.vuex(状态管理,需要进行双语言切换监听变化);

4.ElementUI(饿了么以电脑端为主得UI框架);

5.sass(css预处理);

6.echarts(需要K线图,个人推荐不要用echarts,太大);

7.axios(相对于fetch兼容性好,请求数据)

IE的坑:1.走马灯之前用的是swiper的,结果兼容性不好,4.0+兼容不好,3.0主要以移动端为主,

之后换成了ElementUI的走马灯又引导出无法覆盖ElementUI的样式,因为VUE是默认全局覆盖局部,再加一个style,不要加scoped,ElementUI是全局引入! 解决问题。

2.经验不足,IE9不支持flex,坑、坑、坑移动端写习惯了!

3.多行文本省略只支持webkit内核浏览器,又是坑,用js控制长度搞定!

4.低版本兼容引入babel-polyfill,将build 里entry修改为entry: {'babel-polyfill': 'babel-polyfill',app: './src/'},

5.使用axios低版本兼容 es6-promise包,在里引用

import promise from 'es6-promise'

()

打包:1.history模式:需要服务器端配置请看官网

#example-server-configurations

;不需要改任何东西,路由里加mode:history即可

2.hash模式:将config里里的 assetsPublicPath: '/' 改为assetsPublicPath: './',即可访问静态资源;

3.打包体积:将config里里的productionSourceMap: true, 改为 productionSourceMap: false,或者待打包完之后手动删除Map文件;

4.路由懒加载(具体看官网很简单);

5.第三方包分离将build 里添加

externals:{;

'echarts':"echarts"

6.打包后css背景图无法访问,将build 里添加 publicPath: '../../',

7.sass配置()

{ test: /\.scss$/, loaders: ["style", "css", "sass"]},

如有写错的地方欢迎大家评论

基于Boostrap和Vue设计网页

Boostrap:

首先先对要画的网页进行一个原型设计,由于是公司的主页,因此最主要的功能就是介绍这个公司的业务还有一些新闻,在初步设计后,我的原型图大致为:

接着就可以开始尝试用boostrap 教程和来实现。

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、