vite 版本上传
This commit is contained in:
zouzhibing
parent
a113097fae
commit
e8e11be678
|
|
@ -1,3 +0,0 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
18
.eslintrc.js
18
.eslintrc.js
|
|
@ -1,18 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/standard',
|
||||
'@vue/typescript/recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.vscode
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
|
|
|
|||
11
README.md
11
README.md
|
|
@ -43,7 +43,16 @@ vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
|||
- 其他各组件
|
||||
|
||||
|
||||
## 项目 master 分支 基于vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
## 分支管理
|
||||
- master 技术采用 vite + vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
```
|
||||
注意：使用 Vite 构建工具，需要 Node.js 版本 >= 12.0.0 查看 Node.js 版本 node-v
|
||||
```
|
||||
- webpack 技术采用 webpack + vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
- uniapp 技术采用 uniapp +vuex +element scss
|
||||
|
||||
|
||||
## 项目 master 分支 基于vite + vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
```
|
||||
# 克隆项目
|
||||
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
18
deploy.sh
18
deploy.sh
|
|
@ -1,18 +0,0 @@
|
|||
#强制推送
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
npm run build
|
||||
cd dist
|
||||
touch .nojekyll
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master:gh-pages
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master:gh-pages
|
||||
|
||||
cd -
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
52
package.json
52
package.json
|
|
@ -1,17 +1,18 @@
|
|||
{
|
||||
"name": "vue-admin-perfect",
|
||||
"version": "0.1.0",
|
||||
"name": "my-vue-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "npm run serve",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-scroll/core": "^2.4.2",
|
||||
"clipboard": "^2.0.10",
|
||||
"core-js": "^3.6.5",
|
||||
"dayjs": "^1.11.4",
|
||||
"echarts": "^5.3.1",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "^2.1.4",
|
||||
|
|
@ -21,8 +22,10 @@
|
|||
"mavon-editor": "^2.10.4",
|
||||
"md-editor-v3": "^1.11.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"sass": "^1.54.0",
|
||||
"splitpanes": "^3.1.1",
|
||||
"svg-sprite-loader": "^6.0.11",
|
||||
"vue": "^3.0.0",
|
||||
|
|
@ -38,32 +41,15 @@
|
|||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vue/cli-plugin-babel": "~4.5.8",
|
||||
"@vue/cli-plugin-eslint": "~4.5.8",
|
||||
"@vue/cli-plugin-router": "~4.5.8",
|
||||
"@vue/cli-plugin-typescript": "~4.5.8",
|
||||
"@vue/cli-plugin-vuex": "~4.5.8",
|
||||
"@vue/cli-service": "~4.5.8",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.0",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"lint-staged": "^9.5.0",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"typescript": "~4.1.5"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts,tsx}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"dart-sass": "^1.25.0",
|
||||
"fast-glob": "^3.2.11",
|
||||
"typescript": "^4.6.4",
|
||||
"unplugin-auto-import": "^0.10.3",
|
||||
"unplugin-vue-components": "^0.21.2",
|
||||
"vite": "^3.0.0",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^0.38.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
push.sh
13
push.sh
|
|
@ -1,13 +0,0 @@
|
|||
#强制推送
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
git init
|
||||
git add -A
|
||||
git commit -m '🎉 feat: init project'
|
||||
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
10
src/App.vue
10
src/App.vue
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component"/>
|
||||
</router-view>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -9,8 +7,8 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*background: #f6f8f9;*/
|
||||
/*background: goldenrod;*/
|
||||
/*background: #f6f8f9;*/
|
||||
/*background: goldenrod;*/
|
||||
font-family: Avenir, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
}
|
||||
html,body{
|
||||
height: 100%;
|
||||
background: #f6f8f9;
|
||||
background: #f6f8f9;
|
||||
|
||||
}
|
||||
.el-pager li:focus{
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="page_search">
|
||||
<el-button type="primary" size="small">新增</el-button>
|
||||
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model="search"
|
||||
placeholder="请输入名称"
|
||||
size="small"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button icon="el-icon-search"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-button type="primary" class="search" icon="el-icon-share" @click="exportExcel">导出</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from "vue";
|
||||
import Excel from "exceljs";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const search = ref("");
|
||||
|
||||
const downloadBlob=(arrayList,type,fileName)=>{
|
||||
var blob=new Blob(arrayList,{type:type});
|
||||
var a = document.createElement('a'); //创建a标签用于下载
|
||||
a.download = fileName;
|
||||
a.href = URL.createObjectURL(blob);
|
||||
document.getElementsByTagName("body")[0].appendChild(a);
|
||||
a.click();
|
||||
document.getElementsByTagName("body")[0].removeChild(a);
|
||||
};
|
||||
|
||||
const exportExcel=async()=>{
|
||||
let workbook = new Excel.Workbook();
|
||||
let worksheet = workbook.addWorksheet('报表-威尔森',{views: [{showGridLines: true}]});
|
||||
let alignObj={alignment:{vertical:'middle',horizontal:'center'}};
|
||||
let columns=[{header:"",key:"A",style:alignObj},
|
||||
{header:"",key:"B",width:12,style:alignObj},
|
||||
{header:"",key:"C",style:alignObj},
|
||||
{header:"",key:"D",style:alignObj}];
|
||||
worksheet.columns = columns;
|
||||
|
||||
// 开始添加数据
|
||||
let data=[
|
||||
{A:"COD",B:'',C:"氨氮",D:''},
|
||||
{A:"进水",B:"出水",C:"进水",D:"出水"},
|
||||
{A:1,B:2,C:3,D:4},
|
||||
{A:11,B:2,C:3,D:4},
|
||||
{A:1,B:22,C:3,D:4}
|
||||
];
|
||||
for(let i in data) {
|
||||
worksheet.addRow(data[i]).commit();
|
||||
}
|
||||
|
||||
worksheet.mergeCells('A2:B2');
|
||||
worksheet.mergeCells('C2:D2');
|
||||
|
||||
worksheet.getRow(2).border={top: {style:'thin'},left: {style:'thin'},bottom: {style:'thin'},right: {style:'thin'}}
|
||||
|
||||
//await worksheet.commit();
|
||||
|
||||
// write to a new buffer
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
//console.log(buffer);
|
||||
downloadBlob([buffer],"application/octet-stream","data.xlsx");
|
||||
};
|
||||
|
||||
return {
|
||||
search,exportExcel,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page_search {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search {
|
||||
margin-left: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
const ExcelJS = require("exceljs");
|
||||
|
||||
const autoWidthAction = (val,width=10)=>{
|
||||
if (val == null) {
|
||||
width = 10;
|
||||
} else if (val.toString().charCodeAt(0) > 255) {
|
||||
/*if chinese*/
|
||||
width = val.toString().length * 2;
|
||||
} else {
|
||||
width = val.toString().length;
|
||||
}
|
||||
return width
|
||||
}
|
||||
export const exportExcel = ({column,data,filename,autoWidth})=>{
|
||||
// 创建excel
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
// 设置信息
|
||||
workbook.creator = "Me";
|
||||
workbook.title = filename;
|
||||
workbook.created = new Date();
|
||||
workbook.modified = new Date();
|
||||
// 创建工作表
|
||||
const worksheet = workbook.addWorksheet(filename);
|
||||
// 设置列名
|
||||
let columnsName = [];
|
||||
column.forEach((item,index)=>{
|
||||
let obj = {
|
||||
header: item.label, key:item.name, width: null
|
||||
}
|
||||
if(autoWidth){
|
||||
let maxArr = [autoWidthAction(item.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[item.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
})
|
||||
obj.width = Math.max(...maxArr)+5
|
||||
}
|
||||
// 设置列名、键和宽度
|
||||
columnsName.push(obj);
|
||||
})
|
||||
worksheet.columns = columnsName;
|
||||
// 添加行
|
||||
worksheet.addRows(data);
|
||||
// 写入文件
|
||||
workbook.xlsx.writeBuffer().then((data) => {
|
||||
const blob = new Blob([data, { type: "application/vnd.ms-excel" }]);
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
// msSaveOrOpenBlob方法返回boolean值
|
||||
navigator.msSaveBlob(blob, filename + ".xlsx");
|
||||
// 本地保存
|
||||
} else {
|
||||
const link = document.createElement("a"); // a标签下载
|
||||
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
|
||||
link.download = filename + ".xlsx"; // dowload属性指定文件名
|
||||
link.click(); // click()事件触发下载
|
||||
window.URL.revokeObjectURL(link.href); // 释放内存
|
||||
}
|
||||
});
|
||||
}
|
||||
// 默认的列宽
|
||||
export const DEFAULT_COLUMN_WIDTH = 20;
|
||||
|
||||
function getColumnNumber(width: number) {
|
||||
// 需要的列数，四舍五入
|
||||
return Math.round(width / DEFAULT_COLUMN_WIDTH);
|
||||
}
|
||||
|
||||
|
||||
function addData(worksheet,headerKeys,headers,data){
|
||||
|
||||
}
|
||||
|
||||
export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
|
||||
// 创建excel
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
// 创建工作表
|
||||
const worksheet = workbook.addWorksheet(filename);
|
||||
|
||||
// 第一行表头
|
||||
const names1= [];
|
||||
// 第二行表头
|
||||
const names2= [];
|
||||
|
||||
// 用于匹配数据的 keys
|
||||
const headerKeys= [];
|
||||
|
||||
let headers = [];
|
||||
column.forEach((item,index)=>{
|
||||
let obj = {
|
||||
header: item.label, key:item.name, width: null
|
||||
}
|
||||
let maxArr = [autoWidthAction(item.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[item.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
})
|
||||
obj.width = Math.max(...maxArr)+5
|
||||
// 设置列名、键和宽度
|
||||
headers.push(obj);
|
||||
})
|
||||
|
||||
column.forEach(item => {
|
||||
if (item.children) {
|
||||
// 有 children 说明是多级表头，header name 需要两行
|
||||
item.children.forEach(child => {
|
||||
names1.push(item.label);
|
||||
names2.push(child.label);
|
||||
headerKeys.push(child.name);
|
||||
});
|
||||
} else {
|
||||
names1.push(item.label);
|
||||
names2.push(item.label);
|
||||
headerKeys.push(item.name);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 判断是否有 children, 有的话是两行表头
|
||||
const isMultiHeader = column.some(item => item.children);
|
||||
if(isMultiHeader){
|
||||
const rowHeader1 = worksheet.addRow(names1);
|
||||
const rowHeader2 = worksheet.addRow(names2);
|
||||
|
||||
console.log('rowHeader1====',names1,names2,rowHeader1,rowHeader2)
|
||||
mergeColumnCell(headers, rowHeader1, rowHeader2, names1, names2, worksheet)
|
||||
// return
|
||||
|
||||
}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const rowData = headerKeys?.map(key => item[key]);
|
||||
const row = worksheet.addRow(rowData);
|
||||
// console.log('row--------',row)
|
||||
})
|
||||
// 写入文件
|
||||
workbook.xlsx.writeBuffer().then((data) => {
|
||||
const blob = new Blob([data, { type: "application/vnd.ms-excel" }]);
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
// msSaveOrOpenBlob方法返回boolean值
|
||||
navigator.msSaveBlob(blob, filename + ".xlsx");
|
||||
// 本地保存
|
||||
} else {
|
||||
const link = document.createElement("a"); // a标签下载
|
||||
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
|
||||
link.download = filename + ".xlsx"; // dowload属性指定文件名
|
||||
link.click(); // click()事件触发下载
|
||||
window.URL.revokeObjectURL(link.href); // 释放内存
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function mergeColumnCell(headers, rowHeader1, rowHeader2, nameRow1, nameRow2, worksheet){
|
||||
// 当前 index 的指针
|
||||
let pointer = -1;
|
||||
nameRow1.forEach((name, index) => {
|
||||
// 当 index 小于指针时，说明这一列已经被合并过了，不能再合并
|
||||
if (index <= pointer) return;
|
||||
// 是否应该列合并
|
||||
const shouldVerticalMerge = name === nameRow2[index];
|
||||
|
||||
|
||||
// 是否应该行合并
|
||||
const shouldHorizontalMerge = index !== nameRow1.lastIndexOf(name);
|
||||
|
||||
console.log('==',name,nameRow2[index],index,nameRow1.lastIndexOf(name),shouldVerticalMerge,shouldHorizontalMerge)
|
||||
|
||||
pointer = nameRow1.lastIndexOf(name);
|
||||
if (shouldVerticalMerge && shouldHorizontalMerge) {
|
||||
// 两个方向都合并
|
||||
worksheet.mergeCells(
|
||||
Number(rowHeader1.number),
|
||||
index + 1,
|
||||
Number(rowHeader2.number),
|
||||
nameRow1.lastIndexOf(name) + 1,
|
||||
);
|
||||
console.log('==')
|
||||
} else if (shouldVerticalMerge && !shouldHorizontalMerge) {
|
||||
// 只在垂直方向上同一列的两行合并
|
||||
worksheet.mergeCells(Number(rowHeader1.number), index + 1, Number(rowHeader2.number), index + 1);
|
||||
} else if (!shouldVerticalMerge && shouldHorizontalMerge) {
|
||||
// 只有水平方向同一行的多列合并
|
||||
worksheet.mergeCells(
|
||||
Number(rowHeader1.number),
|
||||
index + 1,
|
||||
Number(rowHeader1.number),
|
||||
nameRow1.lastIndexOf(name) + 1,
|
||||
);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
const cell = rowHeader1.getCell(index + 1);
|
||||
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { computed } from "@vue/reactivity";
|
||||
export default {
|
||||
name: "baseSvgIcon",
|
||||
|
|
@ -13,6 +13,7 @@ export default {
|
|||
className: { type: String },
|
||||
},
|
||||
setup(props) {
|
||||
console.log(11111111)
|
||||
const iconName = computed(() => {
|
||||
return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{displayValue}}
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
|
||||
export default {
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
class="operating" @click.stop="operatingRightAction($event,item)">{{item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: {
|
||||
data:{
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import Vue from 'vue'
|
||||
import SvgIcon from '@/components/SvgIcon'// svg component
|
||||
console.log(11111111)
|
||||
|
||||
|
||||
const req = require.context('./svg', false, /\.svg$/)
|
||||
// const req = require.context('./svg', false, /\.svg$/)
|
||||
const req = import.meta.globEager('./svg/*.svg')
|
||||
consoole.log('req',req)
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
requireAll(req)
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { isExternal } from '@/utils/validate.js'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -26,56 +26,56 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup >
|
||||
import { isExternal } from '@/utils/validate.js'
|
||||
import AppLink from './Link.vue'
|
||||
import path from 'path'
|
||||
import { ref,computed} from 'vue'
|
||||
const props = defineProps({
|
||||
item:{
|
||||
type:Object,
|
||||
required: true
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const onlyOneChild = ref(null)
|
||||
const hasOneShowingChild = (children = [], parent)=>{
|
||||
const showingChildren = children.filter(item => {
|
||||
// 过滤掉需要隐藏的菜单
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// 临时设置（如果只有一个显示子项，则将使用）
|
||||
onlyOneChild.value = item
|
||||
return true
|
||||
import { isExternal } from '@/utils/validate.js'
|
||||
import AppLink from './Link.vue'
|
||||
import path from 'path-browserify'
|
||||
import { ref,computed} from 'vue'
|
||||
const props = defineProps({
|
||||
item:{
|
||||
type:Object,
|
||||
required: true
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 当只有一个子路由器时，默认情况下会显示该子路由器
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
// 如果没有要显示的子路由器，则显示父路由器
|
||||
if (showingChildren.length === 0) {
|
||||
onlyOneChild.value = { ... parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
const onlyOneChild = ref(null)
|
||||
const hasOneShowingChild = (children = [], parent)=>{
|
||||
const showingChildren = children.filter(item => {
|
||||
// 过滤掉需要隐藏的菜单
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// 临时设置（如果只有一个显示子项，则将使用）
|
||||
onlyOneChild.value = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
// 当只有一个子路由器时，默认情况下会显示该子路由器
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
// 如果没有要显示的子路由器，则显示父路由器
|
||||
if (showingChildren.length === 0) {
|
||||
onlyOneChild.value = { ... parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
const resolvePath = (routePath)=>{
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
const resolvePath = (routePath)=>{
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
if (isExternal(props.basePath)) {
|
||||
return props.basePath
|
||||
}
|
||||
return path.resolve(props.basePath, routePath)
|
||||
}
|
||||
if (isExternal(props.basePath)) {
|
||||
return props.basePath
|
||||
}
|
||||
return path.resolve(props.basePath, routePath)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,33 +9,12 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import MenuSlide from './menuSlide.vue'
|
||||
// import SidebarItem from './SidebarItem.vue'
|
||||
import logo from './Logo.vue'
|
||||
// import {useRoute} from 'vue-router'
|
||||
import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
|
||||
import { ref,computed } from 'vue'
|
||||
|
||||
// 在setup中获取store
|
||||
const store = useStore()
|
||||
// const route = useRoute()
|
||||
|
||||
|
||||
// // 获取路由
|
||||
// const permission_routes = computed(()=>{
|
||||
// return store.state.permission.routes
|
||||
// })
|
||||
//
|
||||
//
|
||||
// console.log('permission_routes',permission_routes)
|
||||
//
|
||||
// const activeMenu = computed(()=>{
|
||||
// const { meta, path } = route
|
||||
// // if set path, the sidebar will highlight the path you set
|
||||
// if (meta.activeMenu) {
|
||||
// return meta.activeMenu
|
||||
// }
|
||||
// return path
|
||||
// })
|
||||
|
||||
// 是否折叠
|
||||
const isCollapse = computed(()=>{
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import SidebarItem from './SidebarItem.vue'
|
||||
import logo from './Logo.vue'
|
||||
import {useRoute} from 'vue-router'
|
||||
|
|
@ -25,15 +24,12 @@
|
|||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
// 获取路由
|
||||
const permission_routes = computed(()=>{
|
||||
console.log('permission_routes',store.state.permission.routes)
|
||||
return store.state.permission.routes
|
||||
})
|
||||
|
||||
|
||||
// console.log('permission_routes',permission_routes)
|
||||
|
||||
const activeMenu = computed(()=>{
|
||||
const { meta, path } = route
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
|
|
@ -52,4 +48,4 @@
|
|||
const mode = computed(()=>{
|
||||
return store.state.setting.mode
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
import { useStore } from 'vuex'
|
||||
import {useRoute,useRouter} from 'vue-router'
|
||||
|
||||
const path = require('path')
|
||||
import path from 'path-browserify'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
|
|
|||
11
src/main.ts
11
src/main.ts
|
|
@ -2,9 +2,10 @@ import { createApp } from 'vue'
|
|||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
//
|
||||
import './permission'
|
||||
import SvgIcon from './icons/index'
|
||||
import 'virtual:svg-icons-register'
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component
|
||||
import ElementPlus from 'element-plus'
|
||||
import UContainerLayout from '@/components/u-container-layout/index.vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
|
@ -22,7 +23,9 @@ Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
|
|||
}
|
||||
});
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
app.use(store).use(router).use(ElementPlus,{
|
||||
app.use(store)
|
||||
app.use(router)
|
||||
|
||||
app.use(ElementPlus,{
|
||||
locale: zhCn,
|
||||
}).mount('#app')
|
||||
|
|
|
|||
|
|
@ -13,15 +13,12 @@ let hasRoles = true
|
|||
router.beforeEach(async(to, from, next) => {
|
||||
// 开启进度条
|
||||
NProgress.start()
|
||||
|
||||
// 设置标题
|
||||
if(typeof(to.meta.title) === 'string'){
|
||||
document.title = to.meta.title ||'vue-admin-perfect'
|
||||
}
|
||||
|
||||
// 确定用户是否已登录
|
||||
const hasToken = getToken()
|
||||
|
||||
if (hasToken) {
|
||||
if (to.path === '/login') {
|
||||
// 如果已登录，请重定向到主页
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const clipboardTable = {
|
|||
|
||||
]
|
||||
}
|
||||
|
||||
// //
|
||||
const zipRoutes = {
|
||||
path: '/zip',
|
||||
component: Layout,
|
||||
|
|
@ -94,8 +94,8 @@ const zipRoutes = {
|
|||
|
||||
]
|
||||
}
|
||||
|
||||
// 异步组件
|
||||
//
|
||||
// // 异步组件
|
||||
export const asyncRoutes = [
|
||||
tableRouter,
|
||||
chartsRouter,
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
/* eslint-disable */
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
|
@ -47,6 +47,7 @@ const mutations = {
|
|||
SET_ROUTES: (state, routes) => {
|
||||
state.addRoutes = routes
|
||||
state.routes = constantRoutes.concat(routes)
|
||||
// state.routes = routes
|
||||
},
|
||||
CLEAR_ROUTERS:(state, routes) => {
|
||||
state.addRoutes = []
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import LineCharts from './components/complex/line/index'
|
||||
import BarCharts from './components/complex/bar/index'
|
||||
import LineCharts from './components/complex/line/index.vue'
|
||||
import BarCharts from './components/complex/bar/index.vue'
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
username: 'admin',
|
||||
password: 'admin',
|
||||
})
|
||||
|
||||
console.log(11111111)
|
||||
const rules = reactive({
|
||||
password: [{ validator: validatePass, trigger: 'blur' }],
|
||||
username: [{ validator: validateUsername, trigger: 'blur' }],
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
// import imgSrc from "@/assets/image/berserk.jpg"
|
||||
|
|
|
|||
|
|
@ -1,39 +1,18 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"strict": false,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
const path = require('path')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '.', dir)
|
||||
}
|
||||
module.exports = {
|
||||
lintOnSave: false,
|
||||
publicPath: './',
|
||||
chainWebpack: config => {
|
||||
config.resolve.alias
|
||||
.set('static', resolve('public/static'))
|
||||
config.module.rules.delete('svg') // 重点：删除默认配置中处理svg,
|
||||
config.module
|
||||
.rule('svg-sprite-loader')
|
||||
.test(/\.svg$/)
|
||||
.include
|
||||
.add(resolve('src/icons')) // 处理svg目录
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue