VueStrap介绍

最新推荐文章于 2024-05-11 09:44:49 发布
最新推荐文章于 2024-05-11 09:44:49 发布
阅读量5k 收藏
点赞数 1
分类专栏： Vue/Angular/React/Ember/Roit 文章标签： VueStrap

原文地址：http://yuche.github.io/vue-strap/

Getting started

About this project

This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • Vue.js (required ^1.0.8, test with 1.0.8).
  • Bootstrap CSS (required 3.x.x, test with 3.3.5). VueStrap doesn't depend on a very precise version of Bootstrap. Just pull the latest.

CommonJS

$ npm install vue-strap

var alert = require('vue-strap/src/alert');
// or
var alert = require('vue-strap').alert;

new Vue({
  components: {
    alert: alert
  }
})

ES6

$ npm install vue-strap

import alert from 'vue-strap/src/alert'
// or
import { alert } from 'vue-strap'

new Vue({
  components: {
    alert
  }``
})

AMD

$ bower install vue-strap

define(['vue-strap'], function(VueStrap) { var alert = VueStrap.alert; ... });

Browser globals

The dist folder contains vue-strap.js and vue-strap.min.js with all components exported in the window.VueStrap object. These bundles are also available on both the Bower and NPM packages.

<v-select :options="options"></v-select>

<script src="path/to/vue.js"></script>
<script src="path/to/vue-strap.js"></script>
<script>
  new Vue({
    components: {
      vSelect: VueStrap.select
    },
    data: {
      options: []
    }
  })
</script>

Translations (optional):

If you want to enable language support, you have to add:

<script src="path/to/vue-strap-lang.js"></script>

CommonJS

require('vue-strap/dist/vue-strap-lang.js')

If not included what you need, you can add your own, without editing the source code of vue-strap.

Mobile detection (optional):

If you need to enable/disable options if is a mobile device you can add:

<script src="path/to/isMobileBrowser.js"></script>

Then in javascript you can check it just doing:

if (navigator.isMobile) {
  //do something if is mobile
}
if ('isMobile' in navigator) {
  //do things only if the plugin was loaded

  if (!navigator.isMobile) {
    //do something if is not a mobile
  }
}

Based on Detect Mobile Browsers.

Accordion

  •               
  •      

  •               
  •      

    • Panel #1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Panel #2
    Panel #3
    Panel #4
    <accordion :one-at-atime="checked" type="info">
  <panel is-open type="primary">
    <strong slot="header"><u>Panel #1</u></strong>
    ...
  </panel>
  <panel header="Panel #2">
    ...
  </panel>
  <panel header="Panel #3">
    ...
  </panel>
  <panel header="Panel #4">
    ...
  </panel>
</accordion>

    Accordion Options

    Name Type Default Description
    type String null Define the type of color for the tabs (global).
    one-at-time Boolean false Control whether expanding an item will cause the other items to close.

    Panel Options

    Name Type Default Description
    header String   The clickable text on the group's header. You need one to be able to click on the header for toggling.
    is-open Boolean false Whether accordion group is open or closed.
    type String null Define the type of color for the tab (single).

    If you want to personalice your header with some html you can use the slot instead of header attribute (panel #1 in the example).

    Affix

    The sub-navigation on the RIGHT is a live demo of the affix.

    <affix offset="50">
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <a href="#">...</a>
</affix>

    Affix Options

    Name Type Default Description
    offset Number 0 Pixels to offset from top of screen when calculating position of scroll.

    Alert

     
    Well Done! You successfully read this important alert message.
    Heads up! This alert needs your attention, but it's not super important.
    Oh snap! Change a few things up and try submitting again.
    Warning! Better check yourself, you're not looking too good. 
    <alert type="success/info/danger/warning">
  ...
</alert>

<alert :show.sync="showRight" placement="top-right" duration="3000" type="success" width="400px" dismissable>
  <span class="icon-ok-circled alert-icon-float-left"></span>
  <strong>Well Done!</strong>
  <p>You successfully read this important alert message.</p>
</alert>

<alert :show.sync="showTop" placement="top" duration="3000" type="danger" width="400px" dismissable>
  <span class="icon-info-circled alert-icon-float-left"></span>
  <strong>Heads up!</strong>
  <p>This alert needs your attention.</p>
</alert>

    Alert Options

    Name Type Default Description
    show Boolean true Whether show the component
    dismissable Boolean false Whether show close button
    type String, one of success infowarning danger success Components styles
    duration Number 0 Auto close duration. Set 0 or a negative number will NOT be auto-close.
    width String    
    placement String. one of top, top-right   how to position the component.

    Aside

      
    <aside :show.sync="showRight" placement="right" header="Title" width="350">
  ...
</aside>
<aside :show.sync="showLeft" placement="left" header="Title" width="350">
  ...
</aside>

    Aside Options

    Name Type Default Description
    show Boolean   Whether show the component.
    placement String, one of left, right right how to position the component.
    header String   Header text of the aside component.
    width Number    

    Button Group

    Checkbox

    Checkbox value: []

    Radio

    Radio value: middle

    <button-group :value.sync="checkboxValue">
  <checkbox value="left">Left</checkbox>
  <checkbox value="middle">Middle</checkbox>
  <checkbox value="right">Right</checkbox>
</button-group>

<button-group :value.sync="radioValue" type="primary">
  <radio value="left">Left</radio>
  <radio value="middle">Middle</radio>
  <radio value="right">Right</radio>
</button-group>

Not Buttons:
<button-group :value.sync="radioValue" type="info" buttons="false">
  <radio value="left">Left</radio>
  <radio value="middle">Middle</radio>
  <radio value="right">Right</radio>
</button-group>

    Button Group Options

    Name Type Default Description
    value Array or String   If defined, then the defined values will be checked otherwise the elements with a checked attribute will be checked.
    buttons Boolean true  
    type String, one of default primarydanger info warning success default  

    Checkbox

    Checkbox
    Checkbox Button (Single button)
          

    Checkbox values: {
  "one": null,
  "two": "two",
  "three": null,
  "four": null
}

    <checkbox :checked.sync="checkboxValue.one" value="one">One</checkbox>
<checkbox :checked.sync="checkboxValue.two" value="two" type="primary">Two</checkbox>
<checkbox :checked.sync="checkboxValue.three" value="three" type="info">Three</checkbox>
<checkbox button :checked.sync="checkboxValue.four" value="four" type="danger">Four</checkbox>

    Checkbox Options

    Name Type Default Description
    checked Number or String   Handle the selected value.
    value Number or String   Value to return if the checkbox item is selected.
    type String, one of default primary danger info warningsuccess default  
    button Boolean false Button style.

    See Button Group for more options.

    Datepicker

    Selected date is: Wed Jun 10 2015 08:00:00 GMT+0800 (CST)

    Disabled days of week
  •               
  •      
    • Format
  •               
  •      
    • Reset button
    Placeholder
    <datepicker :value.sync="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder">
</datepicker>

    Datepicker Options

    Name Type Default Description
    value String   Value of the input DOM
    width String 200px Width of the input DOM
    format String MMMM/dd/yyyy The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
    disabled-days-of-week Array   Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
    clear-button Boolean false If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.
    placeholder String   Placeholder to put on the input field when no date (null or empty) is set

    Input

    Only allows lowercase letters and numbers.
    Match the User Name 

     Test event on textarea: 
    <bs-input :value.sync="input" label="Username" help="Only allows lowercase letters and numbers." error="Insert username" placeholder="Username can't start with a number." pattern="^[a-z][a-z0-9]+$" :mask="mask" minlength="5" readonly required icon></bs-input>
<bs-input required label="Match value" type="password" :match="input"></bs-input>
<bs-input label="Textarea" type="textarea" @focus="event = 'focused'" @blur="event = 'blured'"></bs-input>
    mask: function (value) {
  // change to lowercase, remove up to the first letter, and then remove all other unsuported characters
  return value.toLowerCase().replace(/^[^a-z]+/,'').replace(/[^a-z0-9]/g,'');
}

    Input groups:

    More details in bootstrap input groups.

    <bs-input label="With dropdown and button" type="text">
  <dropdown slot="before" text="dropdown">
    <li><a href="#">option</a></li>
  </dropdown>
  <span slot="after" class="input-group-btn">
    <button type="button" class="btn btn-primary">Go!</button>
  </span>
</bs-input>
    $ 
    <bs-input label="With text and icon" type="number" placeholder="Insert how much cost your house">
  <span slot="before" class="input-group-addon"><span class="glyphicon glyphicon-home"></span></span>
  <span slot="after" class="input-group-addon">$</span>
</bs-input>

    Input Options

    Name Type Default Description
    value String '' Input value. Use :value.sync="value"
    match String '' Matching value. Both have to be the same value.
    disabled Boolean false  
    enterSubmit Boolean false Submit when you press Enter. Not supported on type textarea.
    error String null Error message.
    help String null Help text behind the input
    hide-help Boolean true Only work with help and error.
    Hide the help if have to show any error message.
    icon Boolean false  
    label String null Enable input label (name).
    lang String Browser language Language. Default en if the translation doesn't exist.
    mask Function null Mask function that receive and edit the value.
    mask-delay Number 100 Delay time before apply the mask.
    maxlength Number null  
    minlength Number 0  
    name String null  
    pattern String, RegExp or Function null Validation pattern. A full regular expression or a function that evaluate the content and return true or false.
    placeholder String null  
    required Boolean false  
    type String text  
    validation-delay Number 250 Delay time before apply the validation.

    Supported Native Validator Options

    Name Description
    type Use native validation with url and email.
    min / max / step That attributes handle the values supported. Work with the following input types: number, range, date, datetime-local, month, time and week.
    That validations only work in browsers that support  HTML5 form validations (all modern browsers support it).

    Popover

         
    Title
         
    Trigger

     

    <popover effect="fade" placement="bottom" title="Title" content="content">
  <button class="btn btn-default">Popover on bottom</button>
</popover>

    Popover Options

    Name Type Default Description
    trigger String, one of click focus hover contextmenu click How the popover is triggered.
    effect String, one of scale fade fade  
    title String    
    content String    
    header Boolean true Whether to show the header.
    placement String, one of top left right bottom   How to position the popover.

    Progressbar

    Static
    Dynamic 
    Stacked 
    10%
    20%
    30%
    40% 
    Stacked:
<div class="progress">
  <progressbar now label type="warning" striped></progressbar>
  <progressbar now label type="success"></progressbar>
  <progressbar now label type="danger"></progressbar>
  <progressbar now label type="primary" striped animated></progressbar>
</div>
Single:
<div class="progress">
  <progressbar now label type="warning" striped></progressbar>
</div>

    Progressbar Options

    Name Type Default Description
    now Number   The current value of progress completed. Required.
    type String   Style type. Possible values are 'success', 'warning' etc.
    label Boolean false Whether to show the label.
    striped Boolean false Whether the progressbar has striped effect or not.

    Radio

    Radio
    Radio Button (Single buttons)
          

    Radio value: null

    <radio :checked.sync="radioValue" value="one">One</radio>
<radio :checked.sync="radioValue" value="two" type="primary">Two</radio>
<radio button :checked.sync="radioValue" value="three" type="danger">Three</radio>
<radio button :checked.sync="radioValue" value="four" type="info">Four</radio>

    Radio Options

    Name Type Default Description
    checked Number or String   Handle the selected value.
    value Number or String   Value to return if the radio item is selected.
    type String, one of default primary danger info warningsuccess default  
    button Boolean false Button style.

    See Button Group for more options.

    Select

    Based in a bootstrap-select implementation.

    Normal select data:

  •               
  •      
    •   

    Multiple select data : 0,4,5,6

  •               
  •      
    •  

    Multiple:

    <form action="./#select" method="get">
  <v-select :value.sync="select.value" :options="select.options" options-value="val" multiple name="animals[]" limit="3" search justified required disabled clear-button close-on-select></v-select>
  <button type="submit" class="btn btn-default">Submit form</button>
</form>
    options: [
  {val: 0, label: 'Cat'},
  {val: 1, label: 'Cow'},
  {val: 2, label: 'Dog'},
  {val: 3, label: 'Elephant'},
  {val: 4, label: 'Fish'},
  {val: 5, label: 'Lion'},
  {val: 6, label: 'Tiger'},
  {val: 7, label: 'Turtle'}
]
    Select with option component:

    Selected data :

  •               
  •       
    • <v-select>
  <v-option value="apple">Apple</v-option>
  <v-option value="banana">Banana</v-option>
  <v-option value="cherry">Cherry</v-option>
  <v-option value="orange">Orange</v-option>
  <v-option value="grape">Grape</v-option>
</v-select>
    Use button-group (component or bootstrap element) if you want to justify.
  •               
  •       
    • <button-group justified><select>...</select></button-group>
// or
<div class="btn-group btn-group-justified"><select>...</select></div>
    Ajax data and parent dependency:

    The second element has inheritance. Enable when the first get some value and the ajax return values.

  •               
  •      
    •  
  •               
  •       
    • <v-select url="docs/data.json" options-label="text" :value.sync="ajax.value" clear-button></v-select>
<v-select url="docs/data.json" options-label="text" multiple :parent="ajax.value"></v-select>

    Ajax response:

    [
  {
    "value": "Apple",
    "text": "Apple"
  },
  {
    "value": "Banana",
    "text": "Banana"
  },
  {
    "value": "Cherry",
    "text": "Cherry"
  },
  {
    "value": "Orange",
    "text": "Orange"
  },
  {
    "value": "Grape",
    "text": "Grape"
  }
]

    Other Options

    Name Type Default Description
    min-search Number 0 If defined, the searchbox is disabled if are less than the minimum value you set.
    lang String Browser language Language. Default en if the translation doesn't exist.
    options-label String label Define the value in the data used as label.
    options-value String value Define the value in the data used as value.
    placeholder String Nothing Selected  
    search-text String    

    Select Events

    Name Arguments Description
    change (value) Return the selected value(s).
    selected (labels:String) Return a string with the label(s) of the selected item(s).

    Tabs

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <tabs>
  <tab header="one">
    ...
  </tab>
  <tab header="two" disabled>
    ...
  </tab>
  <tab-group header="group1">
    <tab header="three">
      ...
    </tab>
    <tab header="four" disabled>
      ...
    </tab>
  </tab-group>
  <tab-group header="group2">
    <tab header="five">
      ...
    </tab>
  </tab-group>
</tabs>
    components: {
  tabs: VueStrap.tabset,
  tabGroup: VueStrap.tabGroup,
  tab: VueStrap.tab
}

    Tabset (container) Options

    Name Type Default Description
    active Number 0 Active tab index (0 based)

    TabGroup (dropdown) Options

    Name Type Default Description
    disabled Boolean false Whether tabgroup is clickable.
    header String null Group Title

    Tab (element) Options

    Name Type Default Description
    header String   Tab Title
    disabled Boolean false Whether tab is clickable and can be activated.

    Tooltip

         
    Trigger

     

    <tooltip effect="scale" placement="bottom" content="Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod">
  <button class="btn btn-default">tooltip on bottom</button>
</tooltip>

    Tooltip Options

    Name Type Default Description
    trigger String, one of click focus hover contextmenu click How the tooltip is triggered.
    effect String, one of scale fadein scale  

    Typeahead

    Static arrays
    Asynchronous results (not working?)
    Custom templates for results
    <h4>Static arrays</h4>
<typeahead :data="USstate" placeholder="USA states">
</typeahead>

<h4>Asynchronous results</h4>
  <typeahead placeholder="Address, async via maps.googleapis.com" key="results" src="https://maps.googleapis.com/maps/api/geocode/json?address=" template-name="async" :template="asyncTemplate" :on-hit="googleCallback">
</typeahead>

<h4>Custom templates for results</h4>
  <typeahead placeholder="Github users, async via api.github.com" key="items" src="https://api.github.com/search/users?q=" template-name="typeahead-github-template" :template="githubTemplate" :on-hit="githubCallback">
</typeahead>
    new Vue {
  components: {
    typeahead
  },
  data() {
    return {
      USstate: ['Alabama', 'Alaska', 'Arizona',...],
      asyncTemplate: '{{ item.formatted_address }}',
      githubTemplate: '<img width="18px" height="18px" :src="item.avatar_url"> <span>{{item.login}}</span>'
    }
  },
  methods: {
    googleCallback(items, targetVM) {
      const that = targetVM;
      that.reset()
      that.value = items.formatted_address
    },
    githubCallback(items) {
      window.open(items.html_url, '_blank')
    }
  }
}

    Typeahead Options

    Name Type Default Description
    value String ''  
    data Array   The local data source for suggestions. Expected to be a primitive array.
    async String   An HTTP URL for asynchronous suggestions. Expected to return a JSON object.
    delay Number 200 Delay before calling async data while typing.
    limit Number 8 The max number of suggestions to be displayed.
    key String null The remote JSON key you want to render. if null, render directly using the remote JSON(should be Array).
    match-case Boolean false Case sensitive for suggestions.
    match-start Boolean false Match only against start of suggestions. E.g. if true, "a" matches "ab" but not "ba".
    on-hit Function   A callback function when you click or hit return on an item.
    template String <span v-html="$value | highlight query"></span> Used to render suggestion.

    Spinner

  •               
  •       

    • <spinner v-ref:spinner size="md" fixed text="I will close in 2 secs"></spinner>
    // using ref
this.$refs.spinner.show()
this.$refs.spinner.hide()
// using broadcast
this.$broadcast('show::spinner')
this.$broadcast('hide::spinner')

    Spinner Options

    Name Type Default Description
    size String, one of sm, md, lg, xl md The size of the spinner.
    fixed Boolean false Set to true if you want the spinner to occupy the entire window space.

    Form Group

    This is not a style component, is just a global validation manager.

    If you need to evaluate if a group of elements are all valids, you can handle easier with this component.

    In this example, the buttons and tabs are disabled while the inner elements are empty.


    <form-group :valid.sync="valid.all">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tabs :active.sync="active">
      <tab header="User">
        <form-group :valid.sync="valid.user">
          <bs-input label="User Name" required></bs-input>
          <bs-input label="Email" type="email" required></bs-input>
        </form-group>
        <button type="button" class="btn btn-primary" :disabled="!valid.user" @click="active = 1">Continue</button>
      </tab>
      <tab header="Direction" :disabled="!valid.user">
        <form-group :valid.sync="valid.direction">
          <div class="form-group">
            <label class="control-label">Continent</label>
            <v-select required justified :options="['America','Europe']" clear-button></v-select>
          </div>
          <bs-input label="City" type="text" required></bs-input>
        </form-group>
        <button type="button" class="btn btn-primary" :disabled="!valid.all">Done!!</button>
      </tab>
    </tabs>
  </div>
</form-group>

    Form Group Options

    Name Type Default Description
    valid Boolean   Return if all the internal form elements (select, input) are valids.

    坦GA
    关注
    • 1
      点赞
    • 踩
    • 0
      收藏
      觉得还不错? 一键收藏
    • 1
      评论
    专栏目录
    vuestrap使用Vuejs构建的Bootstrap组件
    08-10
    VueStrap将这两者结合，提供了一套基于Vue.js的Bootstrap组件，使得开发者可以在Vue应用中轻松利用Bootstrap的样式和交互。 VueStrap的主要优点在于它能够让你在Vue.js项目中无缝集成Bootstrap的组件，如导航条、...
    8个vue前端UI框架框架值得你掌握
    BYGFJ的博客
    01-08 1万+
    Element(start-28128) 饿了么前端推出的基于 Vue.js 2.0 的后台组件库，它能够帮助你更轻松更快速地开发 web 项目 iview(start-15674) iview一套基于 Vue.js 的高质量 UI 组件库,友好的 API ，自由灵活地使用空间，细致、漂亮的 UI。由TalkingData开发维护，有很多知名互联网企业都在使用 vuetify(start-11449) 一个为 Vue JS 2.0 打造的 Material 风格的组件库,喜欢m.
    闲谈 vue-strap 框架的 vselect 使用方法
    Haines
    10-23 2370
    1.问题: 之前一直不是太了解下拉框与后台交互的原理 2.解决: 逻辑:获取后台数据 ---&gt; 绑定 label 和 value  和 发送给后端的  "用户所选择的值" ,这里命名为 value.sync 业务场景: 前端代码: &lt;v-select :placeholder="'请选择书籍分类标签'" :options="bookTag" ...
    推荐开源项目：vue-strap —— Bootstrap与Vue.js的完美结合
    最新发布
    gitblog_00061的博客
    05-11 533
    推荐开源项目：vue-strap —— Bootstrap与Vue.js的完美结合 项目地址:https://gitcode.com/yuche/vue-strap 项目介绍 虽然该项目已被废弃，但它的两个替代方案，bootstrap-vue 和 uiv，仍然是构建基于Vue.js应用时，实现Bootstrap组件的强大选择。vue-strap原本是一个用Vue.js实现的Bootstrap组件库...
    vue使用Bootstrap的详细方法
    一步一个脚印，踏实努力，向着目标前进
    08-24 1万+
    或者main.jsmain.js这将导入Bootstrap的CSS文件，使您可以在Vue组件中使用Bootstrap的样式。在上面的示例中，我们在Vue组件的模板中使用了Bootstrap的按钮组件。按钮的样式类名是。请注意，您可能还需要在Vue组件中导入其他Bootstrap的JavaScript文件，以便使用一些需要JavaScript支持的组件，如弹出框、标签页等。您可以在需要使用这些组件的Vue组件中导入相关的JavaScript文件。
    JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
    2201_75604580的博客
    04-14 558
    如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
    vuestrap, 用于 Bootstrap 4组件的Vuestrap Javascript包装器.zip
    09-18
    vuestrap, 用于 Bootstrap 4组件的Vuestrap Javascript包装器 VuestrapVuestrap是 Bootstrap 4组件的Javascript包装器。主要用作构建用 Vue.js, 构建的组件的基础库，但可以以在需要 Bootstrap 4组件的任何项目中...
    laravel-realtime-example：实时:pizza:披萨订单跟踪器:pizza:-Laravel，Vue和Pusher
    02-03
    实时比萨订单跟踪器-Laravel，Vue和Pusher :pizza: :pizza: :pizza: YouTube视频教程的代码： : 安装 克隆存储库并将其放入CD composer install 重命名.env.example文件或将其复制到.env ...
    利用纯Vue.js构建Bootstrap组件
    11-27
    VueStrap是一个开源项目，它为Vue.js提供了基于Bootstrap的原生组件，实现了与Bootstrap相同的标记和CSS，但不依赖jQuery或Bootstrap的JavaScript。 Vue.js是一个轻量级的前端框架，以其响应式数据绑定和组件化能力...
    vue 常见框架
    新一代猿人的博客
    04-27 701
    1.Element(start-28128) 饿了么前端推出的基于 Vue.js 2.0 的后台组件库，它能够帮助你更轻松更快速地开发 web 项目 官网地址 http://element.eleme.io/ 2.iview(start-15674) iview一套基于 Vue.js 的高质量 UI 组件库,友好的 API ，自由灵活地使用空间，细致、漂亮的 UI。由TalkingData开发维护，有很多知名互联网企业都在使用 官网地址https://iviewui.com/ vuetify(start-1
    vue-strap-使用Vue.js 2构建的Bootstrap 3组件-Vue.js开发
    05-27
    vue-strap用Vue.js构建的Bootstrap组件。 该存储库包含一组基于Bootstrap的标记和CSS的本地Vue.js组件。 作为vue-strap，使用Vue.js构建的Bootstrap组件。 该存储库包含一组基于Bootstrap的标记和CSS的本地Vue.js组件。 结果，不需要依赖jQuery或BootstrapJavaScript。 唯一需要的依赖项是：Vue.js（必需^ v2.xx，使用v2.0.3进行测试）。 Bootstrap CSS（需要3.xx，请使用3.3.6进行测试）。 VueStrap不依赖于Bootstrap的非常精确的版本。 安装NPM $ npm install github：wffranco / vue-strap --save CommonJS
    推荐几款Vue后台管理系统的框架，以便备用
    耕耘——从菜鸟到高手的蜕变
    09-04 1万+
    推荐几款Vue后台管理系统的框架，以便备用 Vue.js 是一个目前比较流行的前端框架，在业界也算很有名气，今天这里为大家罗列一下基于Vue的后端管理的框架。 使用这些框架你会发现它包括了我们常用的路由，状态，交互等等，我们只需要去复用它的代码，加上一下我们自己少量的逻辑就能轻松的完成项目。 会为你节约更多时间喝喝咖啡等，给你一种“框架在手，天下我有”的感觉。这篇文章主要介绍element和Vue Admin。 1、element Element UI 是一套采用 Vue 2.0 作为基础框架
    vue前端UI框架收集
    qwguo
    07-08 1010
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。随着vue框架的火爆也催生除了很多基于vue的前端ui框架，最有代表性的框架有Element-UI、vuetifyjs、vant等优秀的框架，这里我收集了一些比较优秀的框架和他们的地址 基于 vue 的ui框架 手机 电脑 兼容框架 vuetifyjs vuetifyjs是比较流行的基于vue的前端ui框架，作者John Leider来自国外，vuetifyjs组件众多，并且电脑端，移动端通用一套代码 官网网址：.
    简单介绍vue和bootstrap整合
    xiaoyuer_ying的博客
    08-28 2万+
    一，提前把bootstrap的包下载下来，解压好。 二，在构建完成vue项目后，需要下载jquery插件：cnpm install jquery --save-dev 接着运行下面的3个命令： cnpm install style-loader --save-dev cnpm install file-loader --save-dev cnpm install css-loader -...
    vue引入bootstrap——webpack
    热门推荐
    archer的技术故事
    08-29 5万+
    vue引入bootstrap——webpack 想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstrap 阅读本文前，应该能够搭建环境，使用vue-cli进行项目的创建，可以参考文章： http://blog.csdn.net/wild46cat/article/details/76360229 好，
    vue-strap的几种安装方式哪个最简便？
    weixin_30920597的博客
    07-23 338
    原文地址https://segmentfault.com/q/1010000005350222 只需使用vue-strap中的select，在这里：http://yuche.github.io/vue-strap/#select 文档中写了几种安装方式，在这里：https://github.com/yuche/vue-strap#installation 好像都挺麻烦的，要这样那...
    Vue.js进阶【5-2】bootstrap-vue入门
    C++ 爱好者 make_it_simple888
    09-18 3894
    GitHub https://github.com/bootstrap-vue/bootstrap-vue 元素背景颜色 variant 可选值：success、info、warning、primary、danger、link，缺省灰色，light（白色透明背景）、dark &lt;div&gt; &lt;b-button-group&gt; &lt;b-button&g...
    vue ui框架 vview
    08-24
    对于Vue UI框架的选择，可以考虑VUX和VueStrap这两个选项。VUX是一个Vue.js移动端UI组件库，提供了一套凑合的框架，它由个人开发和维护，并拥有官方网站、手册、演示地址和GitHub地址。你可以在https://vux.li/和...
    评论 1
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值