项目背景
目前的项目是基于若依框架的前后不分离的项目开发的后台管理项目，在此基础上进行迭代开发。
尝试：目前按钮权限是采用<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">的方式进行权限控制的，直接用vue-cli构建一个项目部署的话，按钮的权限无法根据后台设置的角色控制，这个不行；
看了一下若依的文档，然后新的页面的是在vue、vue-router、iview、Thymeleaf，在静态HTML中写vue代码。
实现嵌套路由的代码
index.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="init :: header('待办项目')"></head>
<body>
<div id="app" style="opacity: 0">
<router-view></router-view>
</div>
<div th:replace="init :: expand"></div>
<div th:replace="init :: base"></div>
<div th:replace="init :: iview"></div>
<div th:replace="init :: footer"></div>
<div th:replace="city/projectInfo/components/baseProjectInfo :: baseProjectInfoComponents"></div>
<div th:replace="city/projectInfo/components/baseProjectInfo :: uploadFilesComponents"></div>
<div th:replace="city/projectInfo/components/newItemForm :: newProjectItemFormComponents"></div>
<div th:replace="city/projectInfo/components/projectHistory :: projectHistoryComponents"></div>
<div th:replace="city/projectInfo/components/dealProject :: dealProjectHistoryComponents"></div>
<div th:replace="city/projectInfo/components/dealProject :: dealProjectInfoComponents"></div>
<script>
let routes = [
{ path: '/', name: 'index', },
{ path: '/newProject', name: 'newProject', component: NewProjectItemFormComponent, },
{
path: '/projectHistory',
name: 'projectHistory',
component: ProjectHistoryComponent,
children: [
{ path: '/projectHistory/bdGroup', name: 'projectHistoryBdGroup', component: BDGroupDealProjectInfo },
{ path: '/projectHistory/index/:projectCode', name: 'projectHistoryIndex', component: DealProjectHistory, }
]
},
];
let router = new VueRouter({
routes: routes
})
let vm = new Vue({
router,
el: '#app',
data() {
return {}
},
created() {
$('#app').css('opacity', '1');
this.loading = true
},
})
</script>
</body>
</html>
init.html
公共的组件引用
<div th:fragment="base">
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/vue-router.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
</div>
<div th:fragment="iview">
<link th:href="@{/css/iview.css}" rel="stylesheet" />
<script th:src="@{/js/iview.min.js}"></script>
</div>
projectHistory.html
<div th:fragment="projectHistoryComponents">
<style>
</style>
<script type="text/x-template" id="projectHistory">
<tempalte>
<div class="project-history-wrapper">
<router-view></router-view>
</div>
</tempalte>
</script>
<script>
let ProjectHistoryComponent = Vue.component("ProjectHistory", {
data() {
return {
}
},
template: "#projectHistory",
});
</script>
</div>
组件属性props定义
以前工程化项目都没有这个问题，直接在HTML写会转成全小写才能注册props，或者按官方的写法
Prop 的大小写 (camelCase vs kebab-case)
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
Vue.component('blog-post', {
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<blog-post post-title="hello!"></blog-post>
|