快捷導(dǎo)航

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

更新時間：2017年11月29日 10:21:55 作者：rogerwu

這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

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

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

1、安裝jQuery

npm install jquery

2、安裝Bootstrap

npm install bootstrap@3

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

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

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

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

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

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

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

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

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

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

# 修改端口號

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

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

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