Vue项目初始化

初始化

仅供参考

• 安装

vue create your-name

vue add router vuex element-ui
npm install axios vue-axios vue-cookie
npm install sass-loader node-sass

// router、store异常时
npm install vue-router@3 vuex@3

main.js

...
import store from './store'
import './plugins'

new Vue({
	...,
	store,
	...
}).$mount('#app')

src/router/index.js

...
// 导航守卫
router.beforeEach((to, from, next) => {
	let token = getToken()
	// 将标题修改为路由设置的meta.title
	let defaultTitle = 'xxx系统'
	if (to.meta.title) {
		document.title = to.meta.title + ' - ' + defaultTitle
	}else{
		document.title = defaultTitle
	}

	// 访问特定页面，直接通过
	if (to.name === 'EditorComponentTest' || to.name === 'Test' || to.name === 'Test2' || to.name === 'Index' || to.name === 'Login' || to.name === 'Register'){
		next()
		return
	}

	// 如果已登录，则通过
	if (!token){
		next({name: 'Login'})
		return
	}
	// 未登录，跳转登录页面
	next()
})

export default router

• 全局引入elementUI

element.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI, {  
	// 该参数为全局初始配置
	size: 'small',
	// zIndex: 3000,
})