A Vue.js project use bootstrap4、 bootstrap-vue、element-ui
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
1、vue-cli 项目基础构建
2、Appwork © 构建的bootstrap4 项目 为方便引入 element ui 组件
3、引入axios(已经封装,直接this.$httpAxios调用)目前禁用
4、引入fetch (已经封装)
import { httpGET, httpPOST, httpPUT, httpDEL, refreshToken } from '@/server/common/httpFetch'
5、components/common/util 通用工具函数目录
6、vendor/styles/common.scss 通用样式目录
说明:
1、函数必须接收将要跳转的B系统具体路径 http://localhost:8091/#/workSignIn/workSignInManagement
2、刷新当前token后 ——> 拼接loginedInfo,expires_in,basicUserInfo————>window.open 跳转
引入:
import {mapActions} from 'vuex'
声明
methods: {
...mapActions(['openNewWindowtab'])
}
调用:
<Button @click="openNewWindowtab('http://localhost:8091/#/workSignIn/workSignInManagement')">Button</Button>
说明:
1、函数必须接收将要跳转的B系统具体路径 http://localhost:8091/#/workSignIn/workSignInManagement
2、刷新当前token后 ——> 拼接loginedInfo,expires_in,basicUserInfo————>window.open 跳转
引入:
import {mapActions} from 'vuex'
声明
methods: {
...mapActions(['openNewWindowtab'])
}
调用:
<Button @click="openNewWindowtab('http://localhost:8091/#/workSignIn/workSignInManagement')">Button</Button>
说明:
created() {
console.log(this.$store.state.projectName, 'projectName', this.$route.query)
// 初始化数据
let urlLoginInfo = this.$route.query
let token =
JSON.parse(sessionStorage.getItem('loginedInfo')) &&
JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
if (
urlLoginInfo &&
urlLoginInfo.expires_in &&
urlLoginInfo.expires_in !== '' &&
urlLoginInfo.loginedInfo &&
urlLoginInfo.loginedInfo !== '' &&
urlLoginInfo.basicUserInfo &&
urlLoginInfo.basicUserInfo !== ''
) {
sessionStorage.setItem('expires_in', urlLoginInfo.expires_in)
sessionStorage.setItem('loginedInfo', urlLoginInfo.loginedInfo)
sessionStorage.setItem('basicUserInfo', urlLoginInfo.basicUserInfo)
/* 获取菜单 */
this.getMenuList()
} else if (token && token !== '') {
this.getMenuList()
} else {
router.push({
path: '/login'
})
}
}
说明:
默认获取当前sessionStorage.getItem('userInfo') 如果没有再去获取地址栏中的参数
引入:
import { mapGetters } from 'vuex'
声明
computed: {
...mapGetters(['basicUserInfo'])
}
调用:
created() {
console.log(this.basicUserInfo, '获取基础信息')
}