vue移動端項目的適配(以mint-ui為例)

Flink_China 發(fā)布于2019-08-26 12:13 / 3452人閱讀

摘要：使用腳手架生成項目骨架，略。相關(guān)配置適配加入以下代碼，并在中加入以下按照的官網(wǎng)對按需引用進(jìn)行配置，文件安裝相關(guān)的包相關(guān)配置安裝進(jìn)入文件在頁面中按需引入即可

1、使用vue-cli腳手架生成項目骨架，略。
2、相關(guān)配置：

rem適配：
index.html加入以下代碼，并在head中加入以下meta;

3、按照mint-ui的官網(wǎng)對按需引用進(jìn)行配置，.babelrc文件(安裝相關(guān)的包)

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

4、相關(guān)loader配置

安裝npm i postcss-px2rem-exclude --save-dev
進(jìn)入build/vue-loader.conf.js文件

5、在頁面中按需引入即可

6、That"s all!!!

GPU云服務(wù)器云服務(wù)器移動端適配移動端適配方案移動端適配 js 移動適配

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108273.html

相關(guān)文章

Vue.js 移動端適配之 vw 解決方案

摘要：安裝并配置插件還需要安裝對進(jìn)行配置找到在根目錄中的，對插件進(jìn)行配置視窗的寬度，對應(yīng)的是我們設(shè)計稿的寬度，一般是視窗的高度，根據(jù)設(shè)備的寬度來指定，一般指定，也可以不配置指定轉(zhuǎn)換為視窗單位 1. 安裝并配置PostCss插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cs...

golden_hamster 2019-08-29 16:36 評論0 收藏0
Vue+mint-ui+flexible仿移動端App(網(wǎng)易云課堂)

摘要：仿網(wǎng)易云課堂在線預(yù)覽手機瀏覽或切換谷歌瀏覽器移動調(diào)試預(yù)覽描述前端部分快速構(gòu)建前端界面輪播圖，滑塊管理現(xiàn)非父子組件之間的通信移動設(shè)備兼容使用實現(xiàn)預(yù)編譯實現(xiàn)所有小圖標(biāo)的加載，減少請求路由懶加載結(jié)合異步組件和的做請求存儲用 Vue-wyclass 仿網(wǎng)易云課堂App 在線預(yù)覽：手機瀏覽或切換谷歌瀏覽器移動調(diào)試 Gif預(yù)覽 showImg(https://segmentfault.com/i...

iOS122 2019-08-22 15:12 評論0 收藏0
基于Vue2全家桶的移動端AppDEMO實現(xiàn)

好久沒更新過Vue的小文章，上次做了一個基于Vue+Mint-ui的移動端AppDemo,集成了推送功能，然后通過cordova打包生成apk，移動端表現(xiàn)還不錯，今天把這個小東西分享出來，希望有更多的小伙伴能夠用Vue去做一些有意思的東西，本人才疏學(xué)淺，有說的不對的地方，還請大家多多指教。下面按照慣例放上demo地址和源碼地址,希望大家能給我點下star：Demo(進(jìn)去需要先注冊才能登錄,用的lo...

Jiavan 2019-08-20 13:58 評論0 收藏0
記 vue 移動端開發(fā) 中的經(jīng)驗(2)

摘要：官網(wǎng)還不斷的訪問不了。在此推薦一個移動端庫按需引入二次封裝組件列表的下拉刷新和上拉加載更多是移動端必須的組件。不用寫死高度了，并且兼容對外提供了更加簡明易用的刷新，回到頂部，獲得和設(shè)置滾動條位置的方法統(tǒng)一的提示，免去重復(fù)代碼。按需引入mint-ui 本項目用了 mint-ui 作為基礎(chǔ)ui框架，在使用中遇到不少問題。官網(wǎng)doc 還不斷的訪問不了。不過還是很感謝 mint-ui 團(tuán)隊。...

Flands 2019-08-23 15:42 評論0 收藏0
基于vue-cli3.0構(gòu)建功能完善的移動端架子

摘要：對應(yīng)每一個環(huán)境可能都會有所差異，比如說服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運行的模式。會和中的選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。基于vue-cli3.0構(gòu)建功能完善的移動端架子，主要功能包括 webpack 打包擴展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域設(shè)置 eslint設(shè)置...

Loong_T 2019-08-23 17:05 評論0 收藏0