vue项目main.js配置及使用方法
main.js配置
定义:main.js是项目的入口文件，项目中所有的页面都会加载main.js。
主要有三个作用：
1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。
3.存储全局变量。
项目创建完毕，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.注册全局过滤器
定义：过滤器是对即将显示的数据进行预处理，然后进行显示
创建实例脚本，脚本文件目录如下图所示
加入下方代码
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.配置全局属性
创建实例脚本，脚本文件目录如下图所示
在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家分享了Vue3的 插槽使用汇总，在 2.6.0中，vue 为具名插槽和作用于插槽引入了一个新的统一语法：v-slot。它取代了 slot 和 slot-scope 在新版中的应用，下面就一起来看看文章的详细内容吧2021-12-12
这篇文章主要介绍了vue动态组件之:is在组件中的使用场景,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue 按钮 权限控制，在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限，必须当有删除权限时，就显示删除按钮，下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下2021-12-12
在Vue.js项目中,使用ElementUI的el-upload组件可以轻松实现文件上传功能,通过配置组件参数和实现相应的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
Vue.js每天必学之过渡与动画，对Vue.js过渡与动画进行深入学习，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
elementui中el-row的el-col排列混乱问题及解决
这篇文章主要介绍了elementui中el-row的el-col排列混乱问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了关于elementUi表格合并行数据并展示序号,通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象,感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了vue歌曲进度条demo，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue中数组加Key方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
众所周知，vue 的 mixins 是个非常灵活，但又很容易带来混乱的 API，Mixins 本该是一种强大的重用代码的手段，但使用之后往往带来更多的混乱，代码变得不易维护，本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下2023-06-06
最新评论