vue的main.js文件的作用,vue main.js中引入js
Main.js是我们的入口文件，主要作用是初始化vue实例，引入需要的插件。下面这篇文章主要介绍了在vue项目中使用main.js的相关信息，有需要的可以参考一下。
目录
第一部分：main.js文件分析第二部分：Vue.use的作用是什么，什么时候使用Vue.use？(官方文档)Vue.use()什么时候用？补充：main.js上的便利提示汇总
第一部分：main.js文件解析
Src/main.js是入口文件，主要用于初始化vue实例，并使用所需插件在main.js文件中定义一个vue对象，其中el为实例提供挂载元素//基本配置。
从“vue”导入Vue
从导入应用程序。/App.vue
//引入已经配置好的路由和vuex
从导入路由器。/路由器
从导入存储。/商店/商店
//导入较少(一个样式导入的例子，css，less)
//导入 @/assets/xxx.less
//导入js(例如)
//从“xxx.js”导入xxx
//开始生产消息？
Vue.config.productionTip=false
//第一种书写方法
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
//第二种写法
const myVue=new Vue({
埃尔： #app ，
路由器，
店，
render: h=h(App)
})
导出默认myVue
//其他js文件可以引用main.js的myVue实例来调用myVue的路由器、store等。
//调用Note main。$store，main。$router连vue原型链上的axios都可以调用。
//main。$axios
第二部分：Vue.use的作用以及什么时候使用
在Vue中引入和使用第三方库通常是以导入的形式引入，但是有些组件在引入后做Vue.use()，有些组件在引入后做Vue . prototype . $ something=something，那么这两者之间有什么联系呢？
先说Vue.prototype，在Vue项目中，我们通常会引入axios来请求接口数据。通过npm安装后，我们只需从文件中的“axios”导入axios即可使用。有时候，我们会加一句Vue.prototype.$axios=axios，prototype。我们应该熟悉从“vue”导入Vue
从导入应用程序。/App.vue
//路由导入
从导入路由器。/路由器
//vuex导入
从导入存储。/商店
//npm下载了三方axios包
从“axios”导入axios
//开始生产消息？
Vue.config.productionTip=false
//设置axios的请求根路径
axios.defaults.baseURL=url
//在Vue.prototype上挂载axios
Vue.prototype.$http=axios
//实际上是在vue原型上加了一个$http，然后在剩下的Vue组件的文件中，
//axios可以通过这个直接使用。$http
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
Vue.use是什么？（官方文档）
通过全局方法Vue.use()使用插件。Vue.use会自动防止同一个插件多次注册。这需要在调用new Vue()启动应用程序之前完成。Vue.use()方法至少传入一个参数，参数类型必须是Object或Function。如果是Object，这个对象需要定义一个install方法，如果是Function，这个函数会被当作install方法。当执行Vue.use()时，默认情况下将执行install。执行install时，第一个参数是Vue，其他参数是执行Vue.use()时传入的参数。也就是说，使用完之后，调用组件的install方法。
Vue.use()什么时候使用？
在使用的时候，它实际上调用的是插件的install方法，所以如果当前引入的插件包含install方法，我们就需要使用Vue.use()。例如，按如下方式引用Vue中的元素：
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
//寄存器元素Ui
从“element-ui”导入ElementUI
导入 element-ui/lib/theme-chalk/index . CSS
Vue.use(ElementUI)
//开始生产消息？
Vue.config.productionTip=false
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
使用Vue.use的统一全球注册组件
描述：
Vue.use可以接收一个对象，需要在Vue.use(obj)对象中提供一个install函数。install函数可以得到参数vue，Vue时会自动调用install函数。以后用。第一步是提供统一的注册入口文件src/compones/index . js。
//这个文件负责所有公共组件的全局注册。
//vue插件机制：Vue.use
从导入PageTools。/PageTools
导出默认值{
安装(Vue) {
Vue.component(PageTools ，PageTools)
}
}
第二步：在入口src/main.js Vue.use注册使用自己的插件模块。
从导入组件。/组件
Vue.use(组件)
补充：关于main.js方便小技巧
我先举个例子：
在开发过程中，有一个发送短信的接口需要调试，而我们在调试接口时需要传输手机号码，很多页面都有发送短信的功能。如果我们每次调试接口的时候都把电话号码写到后端，很麻烦，那么我们可以用main.js的全局定义方法来操作，然后我们会大大提高效率！
先编码吧。
主页. js
const send phone number={ apply phone: 123456789 ，approval phone: 987654321 }；
vue . prototype . send phone number=send phone number；
在页面上调试界面的时候可以直接写。
this . send phone number . apply phone
this . send phone number . approval phone
这样会大大方便我们，让我们不用一次换一页。
总结
关于在vue项目中使用main.js的这篇文章就到这里了。关于在vue项目中使用main.js的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。