vue + elementUI + Flask配置
版本信息@vue-cli 4.2elementUI 2.13.0注意事项@vue-cli 4.2 少了很多配置文件, 只有一个babel.config.js和包版本文件.elementUI 按需引入配置babel.config.jsmodule.exports = {'presets': ['@vue/app',['@babel/preset-env', {...
·
版本信息
@vue-cli 4.2
elementUI 2.13.0
注意事项
@vue-cli 4.2 少了很多配置文件, 只有一个babel.config.js和包版本文件.
elementUI 按需引入
配置babel.config.js
module.exports = {
'presets': [
'@vue/app',
['@babel/preset-env', { 'modules': false }]
],
'plugins': [['component', // 删掉[]
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]]
}
创建element.js 编写需要引入的组件
import Vue from 'vue'
import { MessageBox, Message, Loading, Form, FormItem, Input, Button, Image, Icon } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// Vue Element 组件 初始化 按需加载
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Image)
Vue.use(Icon)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
路由配置router/index.js, 懒加载
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: resolve => require(['@/views/login/login'], resolve),
type: 1
},
{
path: '/home',
name: 'home',
component: resolve => require(['@/views/home/home'], resolve),
type: 1
},
{
path: '/service',
name: 'service',
component: resolve => require(['@/views/service/service'], resolve),
type: 1
},
{
path: '/project',
name: 'project',
component: resolve => require(['@/views/project/project'], resolve),
type: 1
},
{
path: '/func',
name: 'func',
component: resolve => require(['@/views/func/func'], resolve),
type: 1
}
]
})
const whiteList = ['/login']// 免登录白名单
router.beforeEach((to, from, next) => {
// to 想要去哪里
// from 从哪里来
// next 跳转到哪里
if (sessionStorage.getItem('isLogin') === 'true') { // determine if there has token
/* has token*/
if (to.path === '/login' || to.path === '/') {
next({ path: '/home' })
} else {
next()
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
}
}
})
export default router
在main.js加载
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import './plugins/element'
import { get, post } from './http/request'
Vue.config.productionTip = false
Vue.prototype.$get = get
Vue.prototype.$post = post
new Vue({
render: h => h(App),
router
}).$mount('#app')
路由去除#号
router里开启 mode: ‘history’ 模式
部署到Python Flask后台
创建vue.config.js配置打包
module.exports = {
outputDir: 'dist',
assetsDir: 'static',
filenameHashing: true
}
把css/img/js文件存放到static文件夹
app = Flask(__name__, template_folder="../static", static_folder="../static")
把Vue打包文件放到Python的static目录, 如下
编写跳转页面路由
from flask import render_template
@app.route('/')
def index():
return render_template('index.html')
修改跳转页面路由
from flask import render_template
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
return render_template('index.html')
更多推荐
已为社区贡献1条内容
所有评论(0)