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)版的配置是不夠的。以下通過配置三項(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í)，并沒有正常進(jìn)行渲染，解決方法如下
安裝element主題：npm i element-theme-chalk -D，完美解決。
2.注冊(cè)全局過濾器
定義：過濾器是對(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ù)制代碼過濾器的注冊(cè)是通過Vue.filter實(shí)現(xiàn)，上方代碼可以快速實(shí)現(xiàn)多個(gè)過濾器da
使用方法：{{10000|toThousandFilter}}
注：除全局過濾器外，在各個(gè)組件中也可以進(jìn)行局部注冊(cè)
過濾器特點(diǎn)
1.過濾器可以串聯(lián) {{10000|Filter1|Filter2}}
2.可以定義全局過濾器復(fù)用性高
3.沒有緩存，被調(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)文章
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue中使用setTimeout問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了解決vue-router路由攔截造成死循環(huán)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例
今天小編就為大家分享一篇vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.extend,mixins和vue.component的區(qū)別及說(shuō)明
Vue.extend 創(chuàng)建Vue的子類,可視為組件構(gòu)造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊(cè)方法,通過Vue.extend創(chuàng)建的組件實(shí)例可以注冊(cè)到Vue全局,使其在任何組件中可用2024-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)菜單切換功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章介紹了vue為自定義路徑設(shè)置別名的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫(kù)里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它2023-04-04
簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別
這篇文章主要介紹了簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10