uniapp + bootstrapvue 移動/PC 一套搞定（一）配置bootstrapvue

時間 2019-12-01

標籤 uniapp bootstrapvue 移動一套搞定配置欄目無線简体版

原文原文鏈接

1.準備文件css

本身到DCloud官網： http://dcloud.io/ 去下載官方的IDE Hbuilder，新建一個空的uniapp項目便可。html

uniapp框架自帶優化的vue,咱們僅僅須要準備如下三個文件：vue

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

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

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

(最新vue壓縮： https://unpkg.com/vue@latest/dist/vue.min.js)chrome

2.修改main.jsjson

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

==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.css和bootstrap-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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

uniapp + bootstrapvue 移動/PC 一套搞定 （一）配置bootstrapvue

uniapp + bootstrapvue 移動/PC 一套搞定（一）配置bootstrapvue