vue项目main.js配置及使用方法

 更新时间:2023年05月23日 11:06:42   作者:小亮_money  
main.js是项目的入口文件,项目中所有的页面都会加载main.js,本文主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element-ui upload组件多文件上传的示例代码

    element-ui upload组件多文件上传的示例代码

    这篇文章主要介绍了element-ui upload组件多文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue实现鼠标滑动预览视频封面组件示例详解

    vue实现鼠标滑动预览视频封面组件示例详解

    这篇文章主要为大家介绍了vue实现鼠标滑动预览视频封面组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 解决vue页面渲染但dom没渲染的操作

    解决vue页面渲染但dom没渲染的操作

    这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vuejs前后端数据交互之从后端请求数据的实例

    vuejs前后端数据交互之从后端请求数据的实例

    今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue移动端实现左滑编辑与删除的全过程

    vue移动端实现左滑编辑与删除的全过程

    vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • 浅谈Vue.js 关于页面加载完成后执行一个方法的问题

    浅谈Vue.js 关于页面加载完成后执行一个方法的问题

    这篇文章主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue的很多思想借鉴于Angular,但却比较轻量和自由,这里我们整理了JavaScript的Vue.js库入门学习教程,包括其架构思想与核心的数据绑定方式等,需要的朋友可以参考下
    2016-05-05
  • 命令行CLI一键生成各种烦人的lint配置实例

    命令行CLI一键生成各种烦人的lint配置实例

    这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • webpack+vue.js快速入门教程

    webpack+vue.js快速入门教程

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程,有需要的可以参考借鉴。
    2016-10-10

最新评论