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

1.準備檔案

自己到DCloud官網： http://dcloud.io/ 去下載官方的IDE Hbuilder，新建一個空的uniapp專案即可。

uniapp框架自帶優化的vue,我們僅僅需要準備以下三個檔案：

bootstrap.min.css //bootstrap 4 以上。https://unpkg.com/[email protected]/dist/css/bootstrap.min.css

bootstrap-vue.min.css // https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css

bootstrap-vue.min.js

// https://unpkg.com/[email protected]/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.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

1.準備檔案自己到DCloud官網： http://dcloud.io/ 去下載官方的IDE Hbuilder，新建一個空的un

全面系統講解CSS 工作應用+面試一步搞定（新手）

html常見元素當我們使用ajax方式提交資料時還需要from表單嗎？需要。利用Jqu’r’y進行批量提交，或者（框架結合，驗證元件去做表單驗證，還有from的特性，記住使用者的賬號密碼） html5 html

Tensorflow實現Mask R-CNN實例分割通用框架，檢測，分割和特征點定位一次搞定（多圖）

優點設計 orf 時間 rcnn 超越 rain 沒有 add Mask R-CNN實例分割通用框架，檢測，分割和特征點定位一次搞定（多圖）導語：Mask R-CNN是Faster R-CNN的擴展形式，能夠有效地檢測圖像中的目標，同時還能為每個實例生成一個

資料庫的原理，一篇文章搞定（一）

https://blog.csdn.net/zhangcanyan/article/details/51439012 一提到關係型資料庫，我禁不住想：有些東西被忽視了。關係型資料庫無處不在，而且種類繁多，從小巧實用的 SQLite 到強大的 Teradata 。但很少有文章講解資料庫是如何工作的。你可以自己

資料庫的原理，一篇文章搞定（三）

合併聯接合併聯接是唯一產生排序的聯接演算法。注：這個簡化的合併聯接不區分內表或外表；兩個表扮演同樣的角色。但是真實的實現方式是不同的，比如當處理重複值時。 1.（可選）排序聯接運算：兩個輸入源都按照聯接關鍵字排序。 2.合併聯接運算：排序後的輸入源合併到一起。

微信H5支付三步輕鬆搞定（C#）

目前，從商城網站、餐廳、商場、超市到菜市、小賣部、路邊攤，移動支付無處不在，極大地方便了我們的生活。特別是微信支付，應用極廣，很受大眾歡迎。然而，對於擁有H5移動商城的商家來說，微信支付只能在微信客戶端內實現，而在微信中又無法使用支付寶，這是令人非常蛋疼的事。現在，好訊

springboot mybatis plus多資料來源輕鬆搞定（上）

在開發中經常會遇到一個程式需要呼叫多個數據庫的情況，總得來說分為下面的幾種情況： 1. 一個程式會呼叫不同結構的兩個資料庫。 2. 讀寫分離，兩個資料結構可能一樣高，但是不同的操作針對不同的資料庫。 3. 混合情況，既有不同的結構的資料庫，也可能存在讀寫分離的情況。下面針對第一種情況，提供一個解決方案。

移動端vue項目構建（二）配置環境 vue-router路由 VUX ui框架 axios請求等等~~

公眾號文件 ons keyword bubuko 使用方法 sass outer click 首先說一下，此項目的配置環境插件，因為是移動端所以有一部分考慮的都是移動端：路由 vue-router 路由路由是vue項目中很重要的東西，構建的時候一路回車就是選好了。

一篇雲伺服器（網站）配置流程

系統：ubuntu：16 安裝python3 已經自帶否則百度 Python升級 # 下載原始碼包 zhiranyouni$ tar xfz Python-3.6.1.tgz zhiranyouni$ ./configure --prefix=/usr/bin/pytho

一小時搞定DIV+CSS布局-固定頁面開度布局

之前水平居中 css charset oat img 水平分享 code DIV+CSS布局中主要CSS屬性介紹： Float: Float屬性是DIV+CSS布局中最基本也是最常用的屬性，用於實現多列功能，我們知道<div>

為什麽別人一周搞定Linux，而你卻做不到

shell腳本我給大家精選準備了4段Shell實戰腳本 / 基礎Linux常用命令；也許能解決你很多實際工作問題；如果看到這些你不知道它能用來幹嘛，先收藏、先記住吧，以後用的上～實戰命令一：在實際的工作中，我們經常需要將多個文件同時移動到一個指定的目錄下，如果一個一個移動，太折騰...你應該要知道：mv 有一

高考估分查分選誌願一鍵搞定_支付寶又操辦了件人生大事

排行榜發布高校概率絕對值 cdn 最終機構它的原文鏈接可能比高考更考驗心力的填報誌願，支付寶要幫你一鍵搞定。支付寶今天正式上線集估分、查分、選誌願等眾多服務於一體的高考後綜合服務平臺，陪伴高考學生的青春大考。考生在估分、查分後，還可以看到系統智能推薦供參

一篇搞定SQLAlchemy--關系對象映射

imp pymysql 進行 .net class ger 索引繼續 pass 　　要使用SQLAlchemy，必須先下載這個模塊 pip3 install sqlalchemy 或 pycharm File--> Settings-->project...

Source Insight 中文註釋為亂碼解決辦法（完美解決，一鍵搞定）【轉】

一步一步搞定Python3.6編碼問題

python 編碼格式 unicodedecodeerror 字節流字符流Python中的編碼問題很蛋疼，我們遇到這類問題有時候會使用下面幾個步驟處理該問題： 1：這麽低級問題，別問同事了太丟人，趕緊百度； 2：臥槽，出了一堆廣告，罵個娘，趕緊找相關解決問題方式； 3：尼瑪，終於搞定，原來

一步搞定私有Git服務器部署(Gogs)

soft 管理員 efault shared 自由 mes off valid art http://www.jianshu.com/p/424627516ef6 零、安裝 Docker 和 Compsoe 首先安裝 Docker： $ curl -sSL http

【免費直播】3.12-3.15，8場公開課大“惠”聚——知識幹貨、專屬優惠，一晚搞定！

人工智能網絡技術軟考數據庫課程安排一覽： 3月12號晚20:00-21:30如何一次通過軟考【小任老師】（系統集成項目管理師/高級信息系統項目管理師） 3月13號晚20:00-21:00如何成為高端IT運維人才【韓立剛老師】 3月13號晚20:00-21:30【楊哥】權威解析紅帽

使用 Docker 一步搞定 ZooKeeper 集群的搭建

docker -i zoo.cfg sin 但是 .com 證明配置當我背景原來學習 ZK 時, 我是在本地搭建的偽集群, 雖然說使用起來沒有什麽問題, 但是總感覺部署起來有點麻煩. 剛好我發現了 ZK 已經有了 Docker 的鏡像了, 於是就嘗試了一下, 發現

×××平臺出租?一招搞定Windows與Linux間Python交互編程

多種語言與python混合編程最近碰到的項目大多是多種語言與python混合編程×××平臺出租? （www.1159880099.com） QQ1159880099 微信 Tel17061863533 源碼交易,源碼開發, ,技術交易,專註於為企業、個人提供個性化定制解決方案，更加高效便捷的為廣大需求者

一篇搞定spring Jpa操作數據庫

.sh 數據庫驅動 DG package return rep int ng- HR 　　開始之前你必須在項目配置好數據庫，本文使用的spring boot，相比spring，spring boot省去了很多各種對以來組件復雜的配置，直接在pom配置組件，完後會自動幫我們導

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

相關推薦

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