首页 > 其他分享 >Vue main.js

Vue main.js

时间:2024-05-01 19:57:37浏览次数:14  
标签:Vue js element filters 过滤器 main

Vue  main.js

main.js是项目的入口文件,项目中所有的页面都会加载main.js

main.js配置

定义:main.js是项目的入口文件,项目中所有的页面都会加载main.js。

主要有三个作用:

 1.实例化Vue

 2.放置项目中经常会用到的插件和CSS样式

3.存储全局变量

项目创建完毕,main.js中会有默认的配置,但是要想真正投入使用,这种简版的配置是不够的。以下通过配置三项内容让读者有个初步的了解。

1.选择合适的前端UI框架

安装 element:

1 npm i element-ui -S

加入下方代码

1 2 import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

遇到安装、添加引用后,在使用时,并没有正常进行渲染,解决方法如下

安装element主题:npm i element-theme-chalk -D,完美解决。

2.注册全局过滤器

定义:过滤器是对即将显示的数据进行预处理,然后进行显示

创建实例脚本,脚本文件目录如下图所示

加入下方代码

1 import * as filters from './filters'

此处的import * 代表引用 filters文件夹下index.js中的所有对象;

1 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})

过滤器的注册是通过Vue.filter实现,上方代码可以快速实现多个过滤器da

使用方法:{{10000|toThousandFilter}}

注:除全局过滤器外,在各个组件中也可以进行局部注册

过滤器特点

1.过滤器可以串联 {{10000|Filter1|Filter2}}

2.可以定义全局过滤器复用性高 

3.没有缓存,被调用时才计算

3.配置全局属性

创建实例脚本,脚本文件目录如下图所示

在main.js中添加引用: 

1 import comFun from './comfun'

加入下方代码

1 2 Vue.prototype.$comFun = comFun Vue.use(comFun)

使用方法:this.$timestampTostr("1605708367")

 

当然随着项目的不同,在main.js的配置也是因人而异,

比如跟后台交互我们要配置axios,cookie的使用要配置js-cookie等等。

 

https://www.jb51.net/javascript/2852492e1.htm

 

标签:Vue,js,element,filters,过滤器,main
From: https://www.cnblogs.com/emanlee/p/18007002

相关文章

  • Vue App.vue
    Vue App.vueVue的App.vue文件是整个Vue项目中最核心的文件之一,它是所有组件的基础组件,也是整个Vue应用的入口文件。我们可以在 App.vue中定义一些全局的样式、组件、路由和状态管理等,从而方便其他组件的调用。App.vue内部包含三个主要部分:模板、逻辑代码和样式。其中......
  • 前端Vue 启动过程 启动流程 执行流程
    前端Vue执行流程Vue的执行流程一般来说,当启动vue程序时,系统会先调用main.js文件 在main.js中,创建了一个新的vue对象并将其挂载到App.vue中id为app的html组件中 在App.js中,引入<router-view/>标签来进行路由管理,系统会进入router文件夹中的index.js文件中来寻找路由i......
  • Vue项目中每个文件夹和文件的用处
     myfirstvue#项目名-node_modules#文件夹,放了该项目所有的依赖,很小很多,以后把项目传给别人,这个要删除,别人拿到执行cnpminstall安装依赖-public#文件夹-favicon.ico#小图标,浏览器上面显示,可以替换-index.htm......
  • Vue项目中main.js、App.vue、import...from...等的作用和意义
      https://www.cnblogs.com/webwangjie/p/11471542.html 一、main.js  1、 main.js程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importLessfrom'Less'......
  • aardio封装库) 微软开源的js引擎(ChakraCore)
    前言做爬虫肯定少不了JavaScript引擎的使用,比如在Python中现在一般用pyexecjs2来执行JavaScript代码,另外还有一些其他执行JavaScript的库:https://github.com/eight04/node_vm2:rpc调用nodejs,需要安装nodehttps://github.com/eight04/deno_vm:rpc调用deno,需要安装denohttps:......
  • [JS]bootstrapTable添加操作按钮
     <scripttype="text/javascript"><!--方法定义-->functionaddFunctionToTable(value,row,index){return['<buttonid="preview"type="button"class="btnbtn-......
  • 【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用
    简述Qt5中包含了处理JSON的类,均以QJson开头(例如:QJsonDocument、QJsonArray、QJsonObject),在QtCore模块中,不需要额外引入其它模块。简述常用的JSON库JSON常用类简单的JSON对象简单的JSON数组复杂的JSON更多参考 常用的JSON库json.org 中介绍了......
  • 《Node.js+Vue.js+MangoDB全栈开发实战》已出版
    《Node.js+Vue.js+MangoDB全栈开发实战》随书源码下载地址:链接:https://pan.baidu.com/s/1DQYgPZLmtJCIuDXs8gub_w?pwd=1127提取码:1127课件下载地址:链接:https://pan.baidu.com/s/1M36y1xu-gIUidDxw38GlBg提取码:1988随书目录目   录第1章 Node.js和TypeScript基础·......
  • threejs 几何体的本质 顶点
    几何体的线框模式,一个正方平面最少可以由4个顶点组成,两个三角形组成(公用了2个顶点,使用了索引创建顶点属性)。//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//引入dat.gui.js的一个类GU......
  • threejs - js库 gui 的使用 调试开发3D效果
    //导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//引入dat.gui.js的一个类GUIimport{GUI}from'three/addons/libs/lil-gui.module.min.js';//创建场景scene......