Vue2在实际项目中的应用——程序入口启动

最新推荐文章于 2024-07-25 00:53:38 发布

kittyjie

最新推荐文章于 2024-07-25 00:53:38 发布

阅读量1.7k

点赞数

分类专栏： ES6 Vue Vue2 Webpack

本文链接：https://blog.csdn.net/kittyjie/article/details/90056832

版权

ES6 同时被 3 个专栏收录

84 篇文章 1 订阅

订阅专栏

12 篇文章 2 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

由于一个项目中要build出来几个访问端口，所以会有几个对应的main-xxx.js。

main中主要干的几件事：

1）加载各种库，包括element-ui和通用的library

2）判断是开发环境还是生产环境，进行不同的初始化过程

1）如果是开发环境，直接初始化app组件，假定用户信息在localstorage中已经存在了

2）如果是生产环境，先检查是否已经登录，然后请求api加载用户信息

看下代码示例：

...

import Vue from 'vue';
import ElementUI from 'element-ui';
import Cookie from 'js-cookie';
import localStore from 'store';
//需要在webpack build文件中配置resolve
import DatappFrontendLibrary, {FuncUtils, TrackUtils, WSHelper, EventBus, Constants} from 'datapp';
import store from './store';
import {router} from './routes/label';
import App from './app';

Vue.use(ElementUI);
Vue.use(DatappFrontendLibrary);

Vue.config.productionTip = false;

let wsInst = null;
let init = () => {
	/* eslint-disable no-new */
	new Vue({
		el: '#app',
		router,
		store,
		template: '<App/>',
		components: { App },
		mounted () {
//初始化websocket，实时接收消息
			wsInst = new WSHelper(Constants.BASE_MSG_URL.replace('https', 'wss') + '/platforms/1/ws?uid=' + uid, (event) => {
				EventBus.$emit(Constants.EVENTS.REV_MSG, JSON.parse(event.data));
			});
			wsInst.connect();
		}
	});
};

window.addEventListener('unload', () => {
	wsInst && wsInst.clear();
});


if (process.env.NODE_ENV !== 'production') {
	init();
} else {
	if (+Cookie.get('status') !== 1) {//检查是否登录
		document.location.href = '/logout?next=' + window.encodeURIComponent(document.location.hash);
	} else {
		Vue.http.get(/* global API_GATEWAY:false */ API_GATEWAY + '/users').then(response => {//请求用户信息
			localStore.set(Constants.LOGIN_USER, response.body);//设置到localstorage中，然后初始化vuex的store中去

			init();//初始化组件

			TrackUtils.trackView({'event_code': 'bzd_all'});
		}).catch(() => {
			console.error('login user error');
		});
	}
}

上面是简单的示例代码，真实的情况还包括处理菜单参数，处理同一个用户同时登陆不同的端等情况