在Vue2.0中對(duì)mint-ui進(jìn)行配置時(shí)需要注意哪些問(wèn)題-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)在Vue2.0中對(duì)mint-ui進(jìn)行配置時(shí)需要注意哪些問(wèn)題，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來(lái)巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：成都自上料攪拌車等網(wǎng)站設(shè)計(jì)、成都全網(wǎng)營(yíng)銷解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

vue.js介紹

Vue.js 是一個(gè)用于創(chuàng)建 web 交互界面的。其特點(diǎn)是

1. 簡(jiǎn)潔 HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個(gè) Vue 實(shí)例，就這么簡(jiǎn)單。

2. 數(shù)據(jù)驅(qū)動(dòng) 自動(dòng)追蹤依賴的模板表達(dá)式和計(jì)算屬性。

3. 組件化 用解耦、可復(fù)用的組件來(lái)構(gòu)造界面。

4. 輕量 ~24kb min+gzip，無(wú)依賴。

5. 快速 精確有效的異步批量 DOM 更新。

6. 模塊友好 通過(guò) NPM 或 Bower 安裝，無(wú)縫融入你的工作流。

vue.js中文官網(wǎng)

mint-ui介紹

Mint UI是餓了么前端團(tuán)隊(duì)開(kāi)源的基于 Vue.js 的移動(dòng)端組件庫(kù)

特點(diǎn)是：

1. Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開(kāi)發(fā)需要。通過(guò)它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。

2. 真正意義上的按需加載組件?？梢灾患虞d聲明過(guò)的組件及其樣式文件，無(wú)需再糾結(jié)文件體積過(guò)大。

3. 考慮到移動(dòng)端的性能門檻，Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。

4. 依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

Mint UI中文官網(wǎng)

創(chuàng)建Vue.js項(xiàng)目

首先根據(jù)vue官網(wǎng)給出的方法在本地創(chuàng)建一個(gè)vue項(xiàng)目

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

配置Mint UI 環(huán)境

接著根據(jù)Mint UI的官網(wǎng)在項(xiàng)目中引入Mint UI的環(huán)境

npm i mint-ui -S

然后在項(xiàng)目中的main.js文件引入所有組件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

好了根據(jù)官網(wǎng)所說(shuō)的，以上代碼便完成了 Mint UI 的引入。

運(yùn)行項(xiàng)目

最后根據(jù)官網(wǎng)的內(nèi)容在APP.vue里面寫一個(gè)button組件看看

<template>
 <div id="app">
 <mt-button @click.native="handleClick">按鈕</mt-button>
</div>
</template>

<script>
export default{
 el: '#app',
 methods: {
  handleClick: function() {
   this.$toast('Hello world!');
  }
 }
}
</script>

<style>
</style>

好了，環(huán)境搭建完成，我們來(lái)運(yùn)行項(xiàng)目吧

npm run dev

然后就啪啪啪各種報(bào)錯(cuò)

解決錯(cuò)誤

首先你需要在本地項(xiàng)目中安裝CSS解釋器

npm i css-loader style-loader -D

然后在build文件夾下面的webpack.base.conf.js文件里面配置如下代碼

{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  
    ],
    use:[
     {loader:"style-loader"},
     {loader:"css-loader"},
    ]
    
   }

如果你報(bào)es2015之類的錯(cuò)誤，則需要將.babelrc文件修改為：

{
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

最后運(yùn)行

環(huán)境配置好后，我們最后再運(yùn)行一下。

npm run dev

終于可以了，就此，環(huán)境配置完成。

看完上述內(nèi)容，你們對(duì)在Vue2.0中對(duì)mint-ui進(jìn)行配置時(shí)需要注意哪些問(wèn)題有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：在Vue2.0中對(duì)mint-ui進(jìn)行配置時(shí)需要注意哪些問(wèn)題-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://muchs.cn/article2/eidic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、服務(wù)器托管、域名注冊(cè)、品牌網(wǎng)站制作、微信小程序、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)