午夜视频在线网站,日韩视频精品在线,中文字幕精品一区二区三区在线,在线播放精品,1024你懂我懂的旧版人,欧美日韩一级黄色片,一区二区三区在线观看视频

分享

快速上手BootstrapVue

 看見就非常 2020-06-08
翻譯:瘋狂的技術(shù)宅
原文:https://blog./ge...

本文首發(fā)微信公眾號(hào):前端先鋒

Vue.js 是一個(gè)流行的 JavaScript 庫(kù),用于在短時(shí)間內(nèi)開發(fā)原型。這包括用戶界面、前端應(yīng)用、靜態(tài)網(wǎng)頁(yè)和本機(jī)移動(dòng)應(yīng)用。它以易用的語(yǔ)法和簡(jiǎn)單的數(shù)據(jù)綁定功能而聞名。

最近,Vue.js 生態(tài)系統(tǒng)發(fā)布了一個(gè)新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個(gè)包稱為 BootstrapVue。它允許我們使用與 Bootstrap(v4)集成的自定義組件。
它還支持自定義 Bootstrap 組件、網(wǎng)格系統(tǒng),還支持 Vue.js 指令。

在本文中,我們將介紹 BootstrapVue 的基礎(chǔ)知識(shí),解釋一般概念,演示設(shè)置過程,并通過它構(gòu)建一個(gè)迷你 Vue.js 項(xiàng)目,以便為你提供更多的實(shí)踐經(jīng)驗(yàn)。

為什么選擇 BootstrapVue?

鑒于 Bootstrap是最受歡迎的獨(dú)立 CSS 框架(在我看來(lái)),很多已經(jīng)或有意向從Vanilla JavaScript 的框架轉(zhuǎn)移到 Vue.js 的開發(fā)人員總是發(fā)現(xiàn)遷移有點(diǎn)困難,因?yàn)?Bootstrap 對(duì) jQuery 的依賴性很大。

使用 BootstrapVue,任何人都可以從 Vanilla.js 或 jQuery 切換到 Vue.js,而無(wú)需擔(dān)心 Bootstrap 對(duì) jQuery 的嚴(yán)重依賴,甚至無(wú)法找到解決方法。這就是 BootstrapVue 的救援方式。它有助于彌補(bǔ)這一差距,并允許 Vue 開發(fā)人員能夠輕松地在他們的項(xiàng)目中使用 Bootstrap。

入門

使用 webpack、babel 等模塊捆綁包時(shí),最好直接把這些包包含到項(xiàng)目中。為了給你演示并提供了解和使用 BootstrapVue 的實(shí)踐方法,我們將用 BootstrapVue 設(shè)置一個(gè) Vue.js 項(xiàng)目,并把它構(gòu)建到一個(gè)功能性的 Vue.js 應(yīng)用中。

先決條件

  • 具備 Vue.js 的基本知識(shí)可以幫你理解這個(gè)演示

  • 在你的電腦上全局安裝 Vue CLI 。如果你目前尚未安裝,請(qǐng)按照此安裝指南進(jìn)行操作

Create a Vue project

創(chuàng)建一個(gè)Vue項(xiàng)目

首先必須創(chuàng)建一個(gè) Vue.js 項(xiàng)目,我們將會(huì)用它來(lái)演示 BootstrapVue 組件的實(shí)現(xiàn)。在首選目錄上打開一個(gè)終端窗口,然后運(yùn)行以下命令:

vue create bootstrapvue-demo

如果你沒有全局安裝 Vue CLI,請(qǐng)按照此安裝指南進(jìn)行操作后再繼續(xù)本教程。

上面的命令會(huì)顯示一個(gè)預(yù)設(shè)的選擇對(duì)話框,如下所示:

clipboard.png

選擇 default,然后單擊Enter繼續(xù):

clipboard.png

現(xiàn)在,你創(chuàng)建了一個(gè) Vue 程序,下面轉(zhuǎn)到新的 Vue 項(xiàng)目目錄,并使用以下命令啟動(dòng)開發(fā)服務(wù)器:

cd bootstrapvue-demo
npm run serve

你的 Vue 應(yīng)用程序?qū)?huì)在 localhost:8080 上提供服務(wù)。在瀏覽器中打開它,你將看到自己的Vue應(yīng)用程序:

clipboard.png

將 Bootstrap 和 BootstrapVue 添加到項(xiàng)目中

有兩種方法可以做到這一點(diǎn),可以用npm和yarn這樣的包管理器或者用CDN鏈接。

使用npm或yarn

我們將使用npm或yarn安裝之前提到的包。切換到項(xiàng)目的根目錄并運(yùn)行下面的任一命令,具體取決于你首選的包管理器:

# With npmnpm install bootstrap-vue bootstrap axios# With yarnyarn add bootstrap-vue bootstrap axios

上面的命令將會(huì)安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue組件,常規(guī)Bootstrap包含CSS文件。另外還安裝了Axios來(lái)幫助我們從themealdb API獲取程序所需的數(shù)據(jù)。

Using CDN

使用CDN

要通過CDN將Bootstrap和BootstrapVue添加到Vue項(xiàng)目,請(qǐng)打開項(xiàng)目公共文件夾中的index.html文件,并將此代碼添加到適當(dāng)?shù)奈恢茫?/p>

<!-- public/index.html--><!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section --><link type="text/css" rel="stylesheet" href="https:///bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="https:///bootstrap-vue@latest/dist/bootstrap-vue.min.css"/><!-- Add Vue and BootstrapVue scripts just before the closing </body> tag --><script src="https:///vue/dist/vue.min.js"></script><script src="https:///bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

這將把每個(gè)庫(kù)的縮小版和最新版本引入我們的項(xiàng)目中,非常簡(jiǎn)單!但是出于本文的目的,我們將使用第一個(gè)方法中的包管理器。下面繼續(xù)設(shè)置BootstrapVue包。

設(shè)置BootstrapVue

接下來(lái),讓我們?cè)O(shè)置剛剛安裝的BootstrapVue包。轉(zhuǎn)到你的main.js文件并將這行代碼添加到頂部:

//src/main.jsimport BootstrapVue from 'bootstrap-vue'Vue.use(BootstrapVue)

在這里做的事情非常簡(jiǎn)單,我們導(dǎo)入了BoostrapVue包,然后用Vue.use()函數(shù)在程序中注冊(cè)它,以便Vue程序可以識(shí)別。

我們還需要將Bootstrap CSS文件導(dǎo)入到項(xiàng)目中。將這段代碼段添加到main.js文件中:

//src/main.jsimport 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'

在將必要的模塊導(dǎo)入Vue程序后,你的main.js文件應(yīng)該和下面的代碼段類似:

//src/main.jsimport Vue from 'vue'import App from './App.vue'import BootstrapVue from 'bootstrap-vue'import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue)
Vue.config.productionTip = falsenew Vue({  render: h => h(App),
}).$mount('#app')

創(chuàng)建Bootstrap組件

下面開始創(chuàng)建我們的第一個(gè)組件,第一個(gè)組件是Navbar組件。轉(zhuǎn)到組件目錄,創(chuàng)建一個(gè)名為Navbar.vue的文件,并使用以下代碼更新它:

//src/components/Navbar.vue<template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="success">
        <b-container>
            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
              <!-- Right aligned nav items -->
              <b-navbar-nav class="ml-auto">
                <b-nav-form>
                  <b-form-input 
                    size="sm" 
                    class="mr-sm-2" 
                    placeholder="Search for a meal"
                    v-model="meal"
                    ></b-form-input>
                  <b-button 
                    size="sm" 
                    class="my-2 my-sm-0" 
                    type="submit" 
                    @click.prevent="getMeal"
                    >Search</b-button>
                </b-nav-form>
                <b-nav-item-dropdown right>
                  <!-- Using 'button-content' slot -->
                  <template slot="button-content"><em>User</em></template>
                  <b-dropdown-item href="#">Profile</b-dropdown-item>
                  <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>
            </b-collapse>
          </b-container>
      </b-navbar>
    </div>  </template><script>export default {
    data() {        return {            meal: ''
        }
    },  methods: {
    getMeal() {
      ...
    }
  }
}    
</script>

Navbar組件中包含幾個(gè)BootstrapVue組件,其中一個(gè)是b-navbar組件。它是Navbar中其他組件的父組件。如果沒有這個(gè)組件,Navbar中的所有其他組件將無(wú)法正確呈現(xiàn)。

可以用type 屬性更改Navbar上的文本顏色。 Navbar的background-color也可以用variant 屬性來(lái)改變。這些顏色可以是任何正常的Bootstrap默認(rèn)顏色 —— info、primarysuccess 等。

另一個(gè)是b-navbar-brand組件。這是可以呈現(xiàn)網(wǎng)站徽標(biāo)的地方。它還包含varianttype屬性,它們可以分別用于改變background-colortext-color。

其他BootstrapVue組件是:

  • b-nav-form

  • b-nav-item-dropdown

  • b-dropdown-item

  • b-navbar-toggle

  • b-collapse

  • b-nav-item(可以用“disabled”屬性禁用)

  • b-navbar-nav

  • b-nav-item.

  • 更多

BootstrapVue組件的一個(gè)美妙之處在于它們默認(rèn)是響應(yīng)式的。所以你無(wú)需編寫額外的代碼或用外部庫(kù)來(lái)使其實(shí)現(xiàn)響應(yīng)式。

還有一個(gè)組件是Card組件。card 組件允許我們?cè)诳ㄖ酗@示圖像、文本等。它寫做b-card 。為了演示它,讓我們?cè)诮M件目錄中創(chuàng)建一個(gè)Cards.vue文件然后用下面的代碼更新其內(nèi)容:

//src/components/Cards.vue<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-col l="4">
            <b-card
                    v-bind:title="data.strCategory"
                    v-bind:img-src="data.strCategoryThumb"
                    img-alt="Image"
                    img-top
                    tag="article"
                    style="max-width: 20rem;"
                    class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
            </b-card>
          </b-col>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet ??</h5>
    </div>
  </b-container></template><script>
  import axios from "axios";  export default {
    data() {      return {        meals: []
      };
    },
    mounted() {
      axios
        .get("https://www./api/json/v1/1/categories.php")
        .then(response => {        this.meals = response.data.categories;
      })
        .catch(err => {        console.log(err);
      });
    }
  };</script>

為了渲染剛剛創(chuàng)建的Cards組件,需要修改HelloWorld.vue文件。打開它并使用以下代碼更新:

//src/components/HelloWorld.vue<template>
  <div>
    <Cards />
  </div></template><script>import Cards from './Cards.vue'export default {  name:'cards',  components: {
    Cards
  },
  data() {    return {
      
    };
  },
};</script><style scoped></style>view raw

在這里做的是創(chuàng)建一個(gè)Cards組件并將其嵌入到HelloWorld.vue文件中請(qǐng)注意,在Cards組件中,有一個(gè)生命周期hook來(lái)修改數(shù)據(jù)。數(shù)據(jù)在被渲染到瀏覽器之前被填充到b-card組件中。

接下來(lái),更新App.vue文件,用來(lái)捕獲最近的更改并將正確的組件呈現(xiàn)給瀏覽器。打開它并使用下面的代碼更新:

//App.vue<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div></template><script>
 import HelloWorld from './components/HelloWorld.vue'
  import Navbar from './components/Navbar.vue';  
  export default {    name: 'navbar',    components: {
      Navbar,
      HelloWorld
    }
  }</script>

這是在瀏覽器上可以看到我們的餐飲程序運(yùn)行如下:

clipboard.png

正如你所看到的,card 沒有被正確的布局,所以必須糾正這一點(diǎn)。幸運(yùn)的是,BootstrapVue有一些可以將我們的card放在網(wǎng)格中的內(nèi)置組件。

它們是:

  • b-row

  • b-col

修改Cards.vue文件中的代碼,使用上面提到的BootstrapVue組件在網(wǎng)格中呈現(xiàn)內(nèi)容。打開Cards.vue文件并使用下面的代碼片段更新:

//src/components/HelloWorld.vue<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-col l="4">
            <b-card
              v-bind:title="data.strCategory"
              v-bind:img-src="data.strCategoryThumb"
              img-alt="Image"
              img-top
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
            </b-card>
          </b-col>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet ??</h5>
    </div>
  </b-container></template><script>import axios from "axios";export default {
  data() {    return {      meals: []
    };
  },
  mounted() {
    axios
      .get("https://www./api/json/v1/1/categories.php")
      .then(response => {        this.meals = response.data.categories;
      })
      .catch(err => {        console.log(err);
      });
  }
};</script>

現(xiàn)在刷新瀏覽器,應(yīng)該看到一個(gè)正確布局的卡片,其中包含渲染內(nèi)容。

clipboard.png

現(xiàn)在有了一個(gè)排列工整的餐飲程序。我們用了一些BootstrapVue的組件構(gòu)建了所有這些。要了解有關(guān)BootstrapVue的更多信息,請(qǐng)查看官方文檔(https://bootstrap-vue./...)。

遷移

如果你想把現(xiàn)有項(xiàng)目從常規(guī)Bootstrap4遷移到BootstrapVue該怎么辦?這將是一件輕而易舉的事。這就是你需要做的:

  1. 從構(gòu)建腳本中刪除bootstrap.js文件

  2. 從你的程序中刪除jQuery,BootstrapVue能獨(dú)立工作

  3. 將本機(jī)Bootstrap標(biāo)記轉(zhuǎn)換為BootstrapVue自定義組件標(biāo)記

就是這些!通過這三個(gè)步驟,你可以將現(xiàn)有項(xiàng)目從依賴jQuery的常規(guī)Bootstrap遷移到更簡(jiǎn)單的獨(dú)立BootstrapVue包,而不會(huì)破壞任何現(xiàn)有代碼。

結(jié)論

本文通過示例演示了怎樣使用BootstrapVue。我們從安裝開始,在Vue項(xiàng)目中進(jìn)行設(shè)置,最后使用其自定義組件構(gòu)建Mealzers程序的一部分??梢钥吹剑珺ootstrapVue模塊簡(jiǎn)單易用。如果你有常規(guī)Bootstrap包的知識(shí),那么使用BootstrapVue將是輕而易舉的一件事。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多