vue 入口main.js 调用app.vue 入口页面以及触发第三方登陆校验

Vue项目搭建与配置详解

最新推荐文章于 2025-09-15 21:58:50 发布

原创最新推荐文章于 2025-09-15 21:58:50 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了一个基于Vue框架的项目搭建过程，包括组件导入、HTTP拦截器设置、全局资源注册及路由配置等核心步骤。文章深入解析了main.js文件中的关键代码，如Vue插件的使用、自定义方法的添加以及跨域请求处理。

main.js 代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Codemirror from 'vue-codemirror'
import ElementUI from 'element-ui'
import VueHighlightJS from 'vue-highlightjs'
import VueResource from 'vue-resource'
import VueCookies from 'vue-cookies'
import echarts from 'echarts'
import yamljs from 'yamljs'
import api from '@/utils/api'
import EventBus from './lib/eventBus.js'

import './lib/css'
import './lib/script'
import './lib/global'

import 'xterm/dist/xterm.css'
import 'codemirror/lib/codemirror.css'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'
import './assets/icon/iconfont.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueHighlightJS)
Vue.use(VueResource)
Vue.use(VueCookies)
Vue.use(yamljs)
Vue.use(Codemirror, /* { 
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

Vue.prototype.$bus = EventBus
Vue.prototype.$echarts = echarts
Vue.prototype.api = api
Vue.prototype.getUrlKey = function(name) {
	return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)
(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null
}
const baseUrl = process.env.NODE_ENV === "development" ? "" : ""

Vue.http.interceptors.push((request, next) => {
  request.url = baseUrl + request.url
	next((response) => {
	 console.log(response.body)
	 if (response.status >= 400) {
	   vue.$message({
		message: response.statusText,
		type: 'error'})
	 } else if (response.body && !response.body.success) {
	   vue.$message({
		message: response.body.errorMsg || '操作失败！',
		type: 'error'})
	 }
  })
})

/* eslint-disable no-new */
const vue = new Vue({
	el: '#app',
	router,
	components: { App },
	template: '<App/>'
})

export default vue

自上到下分别导入组件并use(install),非install组件直接prototype指向

然后对http做了intercepter 拦截处理,最后调用到了main.js 同目录下的app.vue

app.vue 在<script>mounted() {}</script>中调用了登陆校验请求，同时请求传入了校验成功之后跳转的url,这个url对应的vue页面

就是该前端项目的页面，在mounted(){} 方法中将用户sesstion传入后端。