文档章节

uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

panyunxing
 panyunxing
发布于 07/24 00:10
字数 887
阅读 82
收藏 1

1.准备文件

自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。

uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件:

bootstrap.min.css //bootstrap 4 以上。https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css

bootstrap-vue.min.css // https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.min.css

bootstrap-vue.min.js // https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.min.js

(最新vue压缩: https://unpkg.com/vue@latest/dist/vue.min.js)

2.修改main.js

import BootstrapVue from './common/js/bootstrap-vue.min'

==import BootstrapVue from '@/common/js/bootstrap-vue.min.js'

(import from 的单/双引号都一样的。)

(uniapp的main.js中的import Vue from 'vue'不能替换为import Vue from '@/common/js/vue.min.js',否则编译不通过)

注册插件bootstrapvue.js到vue,bootstrapvue.js为一个大型的function,往main.js加入Vue.use(BootstrapVue,{})

3.修改模板文件

manifest.json->h5配置->index.html模板路径,配置为template.h5.html,同时在根目录下新建该文件。可以参考uniapp官网对应模板网址: https://uniapp.dcloud.io/collocation/manifest?id=h5-template

这里我们用link外部样式的方式导入css,在static文件下新建目录css,将相应的bootstrap.min.cssbootstrap-vue.min.css文件移入,放到其他位置编译后找不到,如果是import入的话可以放在其他目录。

在空的template.h5.html文件中添加代码如下:

<!-- template.h5.html -->
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<script>
			var UA = window.navigator.userAgent.toLowerCase();
			var isAndroid = UA.indexOf('android') > 0;
			var isIOS = /iphone|ipad|ipod|ios/.test(UA);
			if (!(isAndroid || isIOS)) {
				// 正式发布的时候使用,开发期间不启用。
				// window.location.href = '/h5/pcguide.html';
			}
		</script>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
			})
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
		<link type="text/css" rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap4.min.css" />
		<link type="text/css" rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap-vue.min.css" />
	</head>
	<body>
		<!-- 该文件为 H5 平台的模板 HTML,并非应用入口。 -->
		<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
		<!-- 详见文档:https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
		<script>
			/*BAIDU_STAT*/
		</script>
	</body>
</html>

这两行是关键:

		<link type="text/css" rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap4.min.css" />
		<link type="text/css" rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap-vue.min.css" />

确保其放在</head>上面即可,也是放到最后link外部样式。

其中<%= BASE_URL %>表示运行的基础路径(部署运行的目录),默认是/static目录就在它里面。

4.添加测试页面

pages->index->index.vue :

<template>
	<div>
		<b-alert show>Default Alert</b-alert>

		<b-alert variant="success" show>Success Alert</b-alert>

		<b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
			Dismissible Alert!
		</b-alert>

		<b-alert :show="dismissCountDown" dismissible variant="warning" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged">
			<p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
			<b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px"></b-progress>
		</b-alert>

		<b-button @click="showAlert" variant="info" class="m-1">
			Show alert with count-down timer
		</b-button>
		<b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
			Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
		</b-button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dismissSecs: 10,
				dismissCountDown: 0,
				showDismissibleAlert: false
			}
		},
		methods: {
			countDownChanged(dismissCountDown) {
				this.dismissCountDown = dismissCountDown
			},
			showAlert() {
				this.dismissCountDown = this.dismissSecs
			}
		},
		components: {

		}
	}
</script>

<style>
</style>

5.编译运行

结果:(完美显示)

6.【补充】为什么不import引入?

import引入公共样式,uniapp有两种方式:

(1)修改main.js

(import './common/css/bootstrap4.min.css'等同于import '@/common/css/bootstrap4.min.css'两种写法)

(2)修改app.vue

编译运行成这样了!!!?

在index.vue的style标签直接添加样式如下,也不行:

	button.close {
		background-color: transparent;
		border: 0;
		-webkit-appearance: none;
	}

使用chrome浏览器调试一下就知道了,强大的uniapp编译器会把你样式的变成这样:

button -> uni-button

© 著作权归作者所有

panyunxing
粉丝 1
博文 23
码字总数 10707
作品 0
茂名
私信 提问
快速上手BootstrapVue

翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta… Vue.js 是一个流行的 JavaScript 库,用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的...

前端先锋
05/08
0
0
UniAPP 安卓应用版本自动更新及下载安装

一. 前言 近期进行 的开发,在项目发布的最后需要实现版本的自动检测和更新下载功能 特地在此进行文章的整理,以方便道友们减少前进道路上的坎坷,多谢指摘 ... 注: 本次指导,以更新 为案例...

豆芽七分熟
06/24
0
0
asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转

很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问...

猎美
2018/11/15
0
0
轮子除了开车,还能摊大饼——地址服务器的一个“另类”用法

地址服务器是软负载的一种实现方式。除了单纯做软负载,它还能做一点其它的事情。 背景 当时我们有两套系统和对应的首页,一套适用于PC端,一套适用于移动端。但是,总难免出现用户进错系统,...

winters1224
2017/08/27
0
0
求指点多终端解决方案

我做个软件,有安卓端,苹果端,pc端,web移动端,数据肯定必须是同步的,有什么好办法,让业务代码尽可能统一。 比如安卓与苹果的返回json或者xml就可以了,一套代码合适 移动端也可以用aja...

老成有木有
2017/05/14
87
3

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
4
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
8
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部