實(shí)用的vue.js項(xiàng)目中小技巧匯總

# 在Vue 項(xiàng)目中引入Bootstrap

有時(shí)在vue項(xiàng)目中會(huì)根據(jù)需求引入Bootstrap，而B(niǎo)ootstrap又是依賴于jQuery的，在使用npm安裝時(shí)，可能會(huì)出現(xiàn)一系列的錯(cuò)誤

1、安裝jQuery

npm install jquery

2、安裝Bootstrap

npm install bootstrap@3

以上兩步，也可以先在package.json 配置文件中指定版本號(hào)，然后運(yùn)行 npm install

安裝完了以后項(xiàng)目是跑不起來(lái)的，盡管二者都已經(jīng)安裝成功了，但還是會(huì)報(bào)錯(cuò) “Bootstrap's JavaScript requires jQuery npm”，為了解決這個(gè)問(wèn)題，可以在 main.js 入口文件中這樣引入：

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

接下來(lái)，為了能夠使用 Bootstrap的樣式，可以在入口文件中引入 bootstrap.css。這個(gè)跟引入 Element UI 的方法一樣

import 'bootstrap/dist/css/bootstrap.min.css'

# 關(guān)閉 eslint 代碼檢查

很多人說(shuō)關(guān)閉eslint檢查的方式是注釋掉 build/webpack.base.conf.js 文件中關(guān)于eslint配置的這一部分。不知道是否因?yàn)閂ue-cli 版本更新的緣故，在實(shí)際操作中，這樣是行不通的。

正確的做法是把 config/index.js 文件中 dev 對(duì)象的useEslint 屬性改為false，官方的注釋也說(shuō)的很清楚

# 關(guān)閉部分eslint規(guī)則

其實(shí) eslint 代碼檢查是非常好的，不僅規(guī)范個(gè)人的js書(shū)寫(xiě)，在團(tuán)隊(duì)多人協(xié)作開(kāi)發(fā)中，更是起到了非常重要的作用。但有時(shí)候，這些規(guī)則有點(diǎn)過(guò)于死板，比如聲明一個(gè)未使用的變量就會(huì)報(bào)錯(cuò) “no-unused-vars”，想要關(guān)閉這個(gè)規(guī)則的話，可以打開(kāi) eslintrc.js 文件，將對(duì)應(yīng)的規(guī)則改為0，即可關(guān)閉

# 修改端口號(hào)

大多數(shù)項(xiàng)目默認(rèn)是監(jiān)聽(tīng)80端口，所以為了同時(shí)運(yùn)行多個(gè)項(xiàng)目，可以在 config/index.js 中修改端口號(hào)

# 設(shè)置文件引用路徑別名

有時(shí)候項(xiàng)目文件過(guò)多，可能經(jīng)常出現(xiàn)類似 "../../../static/data/xx.json" 這樣的引用，寫(xiě)起來(lái)很麻煩而且經(jīng)常容易出錯(cuò)（當(dāng)然代碼編譯器能夠提示就無(wú)所謂了），為了簡(jiǎn)化路徑，我們可以在 build/webpack.base.conf.js 中去配置別名

這里是通過(guò)調(diào)用 resolve 方法來(lái)達(dá)到簡(jiǎn)化路徑的目的，比如可以直接用@來(lái)取代src，也可以直接寫(xiě) "api/xx.js"，而不用一層一層的去找

# UTC time

在使用VueHighcharts 組件時(shí)，默認(rèn)是使用 UTC time的，所以時(shí)間總是顯示的有差距，比如此刻的時(shí)間是2017年11月23日18:07分，但是UTC time顯示的時(shí)間卻是下圖中的10:07

看了文檔都知道要把 useUTC 選項(xiàng)改為false，但就是不知從哪下手。其實(shí)，在main.js中引入組件的同時(shí)，我們就可以做相關(guān)的配置修改

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com