vue項(xiàng)目main.js配置及使用方法
main.js配置
定義:main.js是項(xiàng)目的入口文件，項(xiàng)目中所有的頁(yè)面都會(huì)加載main.js。
主要有三個(gè)作用：
1.實(shí)例化Vue。
2.放置項(xiàng)目中經(jīng)常會(huì)用到的插件和CSS樣式。
3.存儲(chǔ)全局變量。
項(xiàng)目創(chuàng)建完畢，main.js中會(huì)有默認(rèn)的配置，但是要想真正投入使用，這種簡(jiǎn)版的配置是不夠的。以下通過(guò)配置三項(xiàng)內(nèi)容讓讀者有個(gè)初步的了解，廢話不多說(shuō)開整。
1.選擇合適的前端UI框架
安裝 element:
npm i element-ui -S
加入下方代碼
import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'
很多同學(xué)會(huì)遇到安裝、添加引用后，在使用時(shí)，并沒(méi)有正常進(jìn)行渲染，解決方法如下
安裝element主題：npm i element-theme-chalk -D，完美解決。
2.注冊(cè)全局過(guò)濾器
定義：過(guò)濾器是對(duì)即將顯示的數(shù)據(jù)進(jìn)行預(yù)處理，然后進(jìn)行顯示
創(chuàng)建實(shí)例腳本，腳本文件目錄如下圖所示
加入下方代碼
import * as filters from './filters'
此處的import * 代表引用 filters文件夾下index.js中的所有對(duì)象；
Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})復(fù)制代碼過(guò)濾器的注冊(cè)是通過(guò)Vue.filter實(shí)現(xiàn)，上方代碼可以快速實(shí)現(xiàn)多個(gè)過(guò)濾器da
使用方法：{{10000|toThousandFilter}}
注：除全局過(guò)濾器外，在各個(gè)組件中也可以進(jìn)行局部注冊(cè)
過(guò)濾器特點(diǎn)
1.過(guò)濾器可以串聯(lián) {{10000|Filter1|Filter2}}
2.可以定義全局過(guò)濾器復(fù)用性高
3.沒(méi)有緩存，被調(diào)用時(shí)才計(jì)算
3.配置全局屬性
創(chuàng)建實(shí)例腳本，腳本文件目錄如下圖所示
在main.js中添加引用:
import comFun from './comfun'
加入下方代碼
Vue.prototype.$comFun = comFun Vue.use(comFun)
使用方法:this.$timestampTostr("1605708367")
悟：
當(dāng)然隨著項(xiàng)目的不同，在main.js的配置也是因人而異，
比如跟后臺(tái)交互我們要配置axios，cookie的使用要配置js-cookie等等。
到此這篇關(guān)于vue項(xiàng)目main.js配置及使用方法的文章就介紹到這了,更多相關(guān)vue main.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了解決vue頁(yè)面渲染但dom沒(méi)渲染的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過(guò)程
vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架，這篇文章主要給大家介紹了關(guān)于vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下2021-05-05
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
淺談Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題
這篇文章主要介紹了Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript的Vue.js庫(kù)入門學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫(kù)入門學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
隨著前端的快速發(fā)展，非常多的js框架被應(yīng)用到項(xiàng)目中。Vue.js本身支持對(duì)組件的異步加載,配合Webpack的分塊打包功能,可以極其輕松地實(shí)現(xiàn)組件的異步按需加載。 這篇文章是webpack+vue.j的入門教程，有需要的可以參考借鑒。2016-10-10