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