<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          基于vue移動端UI框架有哪些?vue移動端UI框架總匯

          時間:?2017-11-24閱讀:?29004標簽:?vue

          vue現在使用的人越來越多了,這篇文章主要整理一些比較優秀的移動端ui框架,推薦給大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI


          mint UI

        2. 1.Mint UI 包含豐富的 CSS 和 JS 組件,能夠滿足日常的移動端開發需要。通過它,可以快速構建出風格統一的頁面,提升開發效率。
        3. 2.真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件,無需再糾結文件體積過大。
        4. 3.考慮到移動端的性能門檻,Mint UI 采用 CSS3 處理各種動效,避免瀏覽器進行不必要的重繪和重排,從而使用戶獲得流暢順滑的體驗。
        5. 4.依托 Vue.js 高效的組件化方案,Mint UI 做到了輕量化。即使全部引入,壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。
        6. // 安裝基于vue2.0
          npm install mint-ui -S
          //使用
          // 引入全部組件
          import Vue from 'vue';
          import Mint from 'mint-ui';
          Vue.use(Mint);
          // 按需引入部分組件
          import { Cell, Checklist } from 'minu-ui';
          Vue.component(Cell.name, Cell);
          Vue.component(Checklist.name, Checklist);
          官網:http://mint-ui.github.io/#!/zh-cn
          github:https://github.com/ElemeFE/mint-ui/


          vux


          1.Vux是基于WeUI和Vue(2.x)開發的移動端UI組件庫,主要服務于微信頁面。  

          2.基于webpack+vue-loader+vux可以快速開發移動端頁面,配合vux-loader方便你在WeUI的基礎上定制需要的樣式。vux-loader保證了組件按需使用,因此不用擔心最終打包了整個vux的組件庫代碼。 

          3.vux并不完全依賴于WeUI,但是盡量保持整體UI樣式接近WeUI的設計規范。最初目標是創建一個易用,實用,美觀的移動端UI組件庫,現在離理想狀態還有不少距離,因此需要大家及時反饋問題及貢獻代碼。

          //安裝
          npm install vux --save
          //使用
          import { AlertPlugin, ToastPlugin } from 'vux'
          Vue.use(AlertPlugin)
          Vue.use(ToastPlugin)
          官網:https://vux.li/
          github:https://github.com/airyland/vux


          vonic 


          1.一個基于 vue.js 和 ionic 樣式的 UI 框架,用于快速構建移動端單頁應用。 和 ionic沒有關系,只是在樣式方面以 ionic 的 css 文件為基礎(做了一些調整)

          2.vonic 依賴以下幾個庫,在創建 vonic 項目之前,請確保引入它們: vue-router,axios (vue.js 官方推薦的 ajax 方案)

          //安裝
          npm install vonic --save
          //使用
          //應用掛載點
          <von-app></von-app>
          //啟動應用
          Vue.use(Vonic.app, {
            routes: routes
          })
          官網:https://wangdahoo.github.io/vonic/
          github: https://github.com/wangdahoo/vonic


          Muse-ui 

          1.Muse UI 基本實現了 Material Design 設計規范類的所有組件,另外還開發許多的功能性的組件

          2.Muse UI 使用less文件,所有的顏色都有一個變量維護,通過編寫 less 文件完成自定義主題,另外組件內部也提供一些修改效果的參數

          3.Muse UI 基于 Vue2.0 開發,Vue2.0是當下最快的前端框架之一,小巧,api友好,可用于開發的復雜單頁應用

          //安裝
          pm install --save muse-ui
          //加載
          import Vue from 'vue'
          import MuseUI from 'muse-ui'
          import 'muse-ui/dist/muse-ui.css'
          Vue.use(MuseUI)
          官網:http://www.muse-ui.org/
          github: https://github.com/museui/muse-ui


          vant


          1.組件都是來源于有贊的微商城業務,并且經過有贊業務的檢驗,更靠譜 

          2.豐富的文檔和Demo 

          3.支持 babel-plugin-import 

          4.單元測試覆蓋率超過90% 

          5.不僅僅有豐富的基礎組件,還有許多的業務組件

          //安裝
          npm i -S vant
          //按需引入組件
          import { Button } from 'vant/lib/button';
          import 'vant/lib/vant-css/base.css';
          import 'vant/lib/vant-css/button.css';
          //導入所有組件
          import Vue from 'vue';
          import Vant from 'vant';
          import 'vant/lib/vant-css/index.css';
          Vue.use(Vant);
          文檔:https://www.youzanyun.com/zanui/vant#/zh-CN/component/quickstart
          github:https://github.com/youzan/vant/


          cube-ui 

          1.由滴滴內部組件庫精簡提煉而來,歷經考驗,并且每個組件都有充分單元測試,為后續集成提供保障。

          2.以迅速響應、動畫流暢、接近原生為目標,在交互體驗方面追求極致。

          3.遵循統一的設計交互標準,高度還原設計效果;接口標準化,統一規范使用方式,開發更加簡單高效。

          4.支持按需引入和后編譯,輕量靈活;擴展性強,可以方便地基于現有組件實現二次開發。

          //安裝使用:
          npm install cube-ui --save
          //使用
          import Vue from 'vue'
          import Cube from 'cube-ui'
          Vue.use(Cube)
          官網:https://didi.github.io/cube-ui/
          github:https://github.com/didi/cube-ui/


          Vue-Carbon 

           一個基于 Vue 開發 material design 風格的移動端 UI 庫

          //安裝
          npm install vue-carbon --save
          //使用
          import Vue from 'vue'
          import VueCarbon from 'vue-carbon'
          import 'vue-carbon/dist/vue-carbon.css' // 加載文件
          Vue.use(VueCarbon)
          文檔:http://www.myronliu.com/vue-carbon/#!/
          github: https://github.com/myronliu347/vue-carbon


          YDUI 


          1.YDUI Touch 專為移動端打造,在技術實現、交互設計上兼容主流移動設備,保證代碼輕、性能高。

          2.使用 Flex 技術,靈活自如地對齊、收縮、擴展元素,輕松搞定移動頁面布局。

          3.實現強大的屏幕適配布局,等比例適配所有屏幕。什么?用得不開心?輕松切換 px。

          4.自定義Javascript組件、Less文件、Less變量,定制一份屬于自己的YDUI。

          <!-- 引入YDUI樣式 -->
          <link rel="stylesheet" href="path/build/css/ydui.css" />
          <!-- 引入YDUI自適應解決方案類庫 -->
          <script src="path/build/js/ydui.flexible.js"></script>
          
          <!-- 引入jQuery 2.0+ -->
          <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
          <!-- 引入YDUI腳本 -->
          <script src="path/build/js/ydui.js"></script>
          官網:http://www.ydui.org/
          github: https://github.com/ydcss/ydui


          除了上面的這些基于VUE的UI組件外,還有很多其他的暫未整理。請留言補充哦~~~~~~~


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/166

          Vue 的 .sync 修飾符

          .sync 修飾符算是 Vue 的所有修飾符中較難理解的一個,本篇文章就帶你走近 .sync 的世界,深入理解后會發現,其實也就那么回事。修飾符和指令息息相關,下面從 指令 -> 修飾符 -> .sync 修飾符 由淺入深地來講解 .sync 的含義及用法。

          vue中is的作用和用法

          總所周知,ul里面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。my-component是我們自己寫的組件,但是html在渲染dom的時候,my-component對ul來說并不是有效的dom,甚至會報錯。

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          12種使用Vue的最佳做法

          隨著 VueJS 的使用越來越廣泛,出現了幾種最佳實踐并逐漸成為標準。在本文中,主要分享在平時開發中一些有用資源和技巧,廢話少說,我們開始吧。

          如何理解vue中的v-bind?

          若不是動態屬性,首先為其增加駝峰化后的監聽,然后再為其增加一個連字符的監聽,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on監聽是通過addHandler加上的。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          Vue最佳實踐

          Vue 最佳實踐,是參考 Vue 官方風格指南并根據過去 Vue 實際項目開發中的經驗總結的一套規范建議。本項目的目的是希望每個 Vue 開發者都能盡快熟悉并上手項目代碼,志在幫助 Vue 新手開發者及時避免一些不規范的設計和由此而引發的問題

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网