vue項目main.js配置及使用方法
main.js配置
定義:main.js是項目的入口文件，項目中所有的頁面都會加載main.js。
主要有三個作用：
1.實例化Vue。
2.放置項目中經常會用到的插件和CSS樣式。
3.存儲全局變量。
項目創(chuàng)建完畢，main.js中會有默認的配置，但是要想真正投入使用，這種簡版的配置是不夠的。以下通過配置三項內容讓讀者有個初步的了解，廢話不多說開整。
1.選擇合適的前端UI框架
安裝 element:
npm i element-ui -S
加入下方代碼
import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'
很多同學會遇到安裝、添加引用后，在使用時，并沒有正常進行渲染，解決方法如下
安裝element主題：npm i element-theme-chalk -D，完美解決。
2.注冊全局過濾器
定義：過濾器是對即將顯示的數據進行預處理，然后進行顯示
創(chuàng)建實例腳本，腳本文件目錄如下圖所示
加入下方代碼
import * as filters from './filters'
此處的import * 代表引用 filters文件夾下index.js中的所有對象；
Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})復制代碼過濾器的注冊是通過Vue.filter實現，上方代碼可以快速實現多個過濾器da
使用方法：{{10000|toThousandFilter}}
注：除全局過濾器外，在各個組件中也可以進行局部注冊
過濾器特點
1.過濾器可以串聯 {{10000|Filter1|Filter2}}
2.可以定義全局過濾器復用性高
3.沒有緩存，被調用時才計算
3.配置全局屬性
創(chuàng)建實例腳本，腳本文件目錄如下圖所示
在main.js中添加引用:
import comFun from './comfun'
加入下方代碼
Vue.prototype.$comFun = comFun Vue.use(comFun)
使用方法:this.$timestampTostr("1605708367")
悟：
當然隨著項目的不同，在main.js的配置也是因人而異，
比如跟后臺交互我們要配置axios，cookie的使用要配置js-cookie等等。
到此這篇關于vue項目main.js配置及使用方法的文章就介紹到這了,更多相關vue main.js內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了在vue中實現echarts隨窗體變化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue中使用setTimeout問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了解決vue-router路由攔截造成死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇vue導航欄部分的動態(tài)渲染實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue?el-switch初始值(默認值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.extend,mixins和vue.component的區(qū)別及說明
Vue.extend 創(chuàng)建Vue的子類,可視為組件構造函數,Vue.mixin 允許全局添加方法或屬性,方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實例可以注冊到Vue全局,使其在任何組件中可用2024-09-09
這篇文章主要介紹了vue實現菜單切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章介紹了vue為自定義路徑設置別名的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04
這篇文章主要介紹了簡單了解vue中的v-if和v-show的區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10