初始化代码
This commit is contained in:
commit
d23b8af9cd
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'vue/multi-word-component-names': 0 //不强制要求组件命名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"Vue.vscode-typescript-vue-plugin",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"esbenp.prettier-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
# mental-health-student
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>云舒-心理健康平台-学生端</title>
|
||||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"name": "mental-health-student",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"@vueuse/core": "^10.7.1",
|
||||||
|
"axios": "^1.6.3",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
|
"element-plus": "^2.6.2",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.3.11",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
|
"@vitejs/plugin-vue": "^4.5.2",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"eslint": "^8.49.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"sass": "^1.69.6",
|
||||||
|
"unplugin-auto-import": "^0.17.3",
|
||||||
|
"unplugin-icons": "^0.18.5",
|
||||||
|
"unplugin-vue-components": "^0.26.0",
|
||||||
|
"vite": "^5.0.10",
|
||||||
|
"vite-plugin-vue-setup-extend": "^0.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 一级路由出口组件 -->
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.test {
|
||||||
|
color: $priceColor
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
// 封装所有和用户相关的接口函数
|
||||||
|
import request from '@/utils/http'
|
||||||
|
|
||||||
|
export const loginAPI = ({ account, password }) => {
|
||||||
|
return request({
|
||||||
|
url: '/login',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
account,
|
||||||
|
password
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const getLikeListAPI = ({ limit = 4 }) => {
|
||||||
|
return request({
|
||||||
|
url: '/goods/relevant',
|
||||||
|
params: {
|
||||||
|
limit
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1,35 @@
|
||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { useMouseInElement } from '@vueuse/core'
|
||||||
|
|
||||||
|
// 图片列表
|
||||||
|
const imageList = [
|
||||||
|
"https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
|
||||||
|
"https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
|
||||||
|
"https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
|
||||||
|
"https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
|
||||||
|
"https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
|
||||||
|
]
|
||||||
|
|
||||||
|
// 小图切换大图显示
|
||||||
|
const activeIndex = ref(0)
|
||||||
|
const enterHandler = (i) => {
|
||||||
|
activeIndex.value = i
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取鼠标相对位置
|
||||||
|
const target = ref(null)
|
||||||
|
const { elementX, elementY, isOutside } = useMouseInElement(target)
|
||||||
|
|
||||||
|
const left = ref(0)
|
||||||
|
const top = ref(0)
|
||||||
|
watch([elementX, elementY], () => {
|
||||||
|
// 有效范围内控制滑块距离
|
||||||
|
// 横向
|
||||||
|
if (elementX.value > 100 && elementX.value < 300) {
|
||||||
|
left.value = elementX.value - 100
|
||||||
|
}
|
||||||
|
// 纵向
|
||||||
|
if (elementY.value > 100 && elementY.value < 300) {
|
||||||
|
top.value = elementY.value - 100
|
||||||
|
}
|
||||||
|
// 边界处理
|
||||||
|
if (elementX.value > 300) {
|
||||||
|
left.value = 200
|
||||||
|
}
|
||||||
|
if (elementX.value < 100) {
|
||||||
|
left.value = 0
|
||||||
|
}
|
||||||
|
if (elementY.value > 300) {
|
||||||
|
top.value = 200
|
||||||
|
}
|
||||||
|
if (elementY.value < 100) {
|
||||||
|
top.value = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="goods-image">
|
||||||
|
<!-- 左侧大图-->
|
||||||
|
<div class="middle" ref="target">
|
||||||
|
<img :src="imageList[activeIndex]" alt="" />
|
||||||
|
<!-- 蒙层小滑块 -->
|
||||||
|
<div class="layer" :style="{ left: `${left}px`, top: `${top}px` }"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 小图列表 -->
|
||||||
|
<ul class="small">
|
||||||
|
<li v-for="(img, i) in imageList" :key="i" @mouseenter="enterHandler(i)" :class="{ active: i === activeIndex }">
|
||||||
|
<img :src="img" alt="" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- 放大镜大图 -->
|
||||||
|
<div class="large" :style="[
|
||||||
|
{
|
||||||
|
backgroundImage: `url(${imageList[0]})`,
|
||||||
|
backgroundPositionX: `0px`,
|
||||||
|
backgroundPositionY: `0px`,
|
||||||
|
},
|
||||||
|
]" v-show="false"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.goods-image {
|
||||||
|
width: 480px;
|
||||||
|
height: 400px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 412px;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
z-index: 500;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// 背景图:盒子的大小 = 2:1 将来控制背景图的移动来实现放大的效果查看 background-position
|
||||||
|
background-size: 800px 800px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
// 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width: 80px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
border: 2px solid $xtxColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { useIntersectionObserver } from '@vueuse/core'
|
||||||
|
|
||||||
|
// 定义懒加载插件
|
||||||
|
export const lazyPlugin = {
|
||||||
|
install(app) {
|
||||||
|
app.directive('img-lazy', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
// el:指令绑定的那个元素 img
|
||||||
|
// bingding:binding.value 指令等于号后面绑定的表达式的值 图片url
|
||||||
|
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
|
||||||
|
if (isIntersecting) {
|
||||||
|
// 进入视口区域
|
||||||
|
el.src = binding.value
|
||||||
|
stop()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import * as Elicons from '@element-plus/icons-vue'
|
||||||
|
//引入Elmessage和Elloading的css样式文件
|
||||||
|
import 'element-plus/theme-chalk/el-loading.css'
|
||||||
|
import 'element-plus/theme-chalk/el-message.css'
|
||||||
|
|
||||||
|
import '@/styles/common.scss'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
// 引入悟加载指令插件并且注册
|
||||||
|
import { lazyPlugin } from '@/directives'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.use(lazyPlugin)
|
||||||
|
|
||||||
|
//全局注册elementplus icon
|
||||||
|
Object.keys(Elicons).forEach((key) => {
|
||||||
|
app.component(key, Elicons[key])
|
||||||
|
})
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
import Login from '@/views/Login/index.vue'
|
||||||
|
import Exam from '@/views/Exam/index.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: Login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Exam
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 路由滚动行为定制
|
||||||
|
scrollBehavior() {
|
||||||
|
return {
|
||||||
|
top: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
// 管理用户数据相关
|
||||||
|
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { loginAPI } from '@/apis/user'
|
||||||
|
export const useUserStore = defineStore(
|
||||||
|
'user',
|
||||||
|
() => {
|
||||||
|
// 1. 定义管理用户数据的state
|
||||||
|
const userInfo = ref({})
|
||||||
|
// 2. 定义获取接口数据的action函数
|
||||||
|
const getUserInfo = async ({ account, password }) => {
|
||||||
|
const res = await loginAPI({ account, password })
|
||||||
|
userInfo.value = res.result
|
||||||
|
}
|
||||||
|
|
||||||
|
// 退出时清除用户信息
|
||||||
|
const clearUserInfo = () => {
|
||||||
|
userInfo.value = {}
|
||||||
|
}
|
||||||
|
// 3. 以对象的格式把state和action return
|
||||||
|
return {
|
||||||
|
userInfo,
|
||||||
|
getUserInfo,
|
||||||
|
clearUserInfo
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
persist: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
// 重置样式
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
color: #333;
|
||||||
|
min-width: 1240px;
|
||||||
|
font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
|
||||||
|
'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
|
||||||
|
sans-serif;
|
||||||
|
}
|
||||||
|
body,
|
||||||
|
ul,
|
||||||
|
h1,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
p,
|
||||||
|
dl,
|
||||||
|
dd {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
input[type='text'],
|
||||||
|
input[type='search'],
|
||||||
|
input[type='password'],
|
||||||
|
input[type='checkbox'] {
|
||||||
|
padding: 0;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
&::placeholder {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
background: #ebebeb url('@/assets/images/200.png') no-repeat center / contain;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
background: #f5f5f5;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 1240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ellipsis {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis-2 {
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
content: '.';
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
// reset element
|
||||||
|
.el-breadcrumb__inner.is-link {
|
||||||
|
font-weight: 400 !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* 只需要重写你需要的即可 */
|
||||||
|
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
|
||||||
|
'base': #129AFE,
|
||||||
|
),
|
||||||
|
'success': ( // 成功色
|
||||||
|
'base': #1dc779,
|
||||||
|
),
|
||||||
|
'warning': ( // 警告色
|
||||||
|
'base': #ffb302,
|
||||||
|
),
|
||||||
|
'danger': ( // 危险色
|
||||||
|
'base': #e26237,
|
||||||
|
),
|
||||||
|
'error': ( // 错误色
|
||||||
|
'base': #cf4444,
|
||||||
|
),
|
||||||
|
))
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
$xtxColor: #129AFE;
|
||||||
|
$helpColor: #e26237;
|
||||||
|
$sucColor: #1dc779;
|
||||||
|
$warnColor: #ffb302;
|
||||||
|
$priceColor: #cf4444;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const http = axios.create({
|
||||||
|
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
|
||||||
|
// axios请求拦截器
|
||||||
|
http.interceptors.request.use(config => {
|
||||||
|
return config
|
||||||
|
}, e => Promise.reject(e))
|
||||||
|
|
||||||
|
// axios响应式拦截器
|
||||||
|
http.interceptors.response.use(res => res.data, e => {
|
||||||
|
return Promise.reject(e)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default http
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
<template>
|
||||||
|
<el-container class="container-exam">
|
||||||
|
<el-header class="header">
|
||||||
|
SCL-90症状自评量表_专业焦虑与抑郁测试
|
||||||
|
</el-header>
|
||||||
|
<el-main class="main">
|
||||||
|
<el-card class="card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<p>症状自评量表-SCL90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。SCL90协助我们从十个方面来了解自己的心理健康程度。</p>
|
||||||
|
<p>症状自评量表（Self-reporting
|
||||||
|
Inventory)，又名90项症状清单（SCL-90），时也叫做Hopkin's症状清单（HSCL，编制年代早于SCL-90，作者为同一人，HCSL最早版编于1954年）。于1975年编制，其作者是德若伽提斯（L.R.Derogatis)。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等，均有涉及，并采用10个因子分别反映10个方面的心理症状情况。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="subject-btn">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button type="primary" size="large" @click="previous" :disabled="preDisable">
|
||||||
|
<el-icon class="el-icon--left">
|
||||||
|
<ArrowLeft />
|
||||||
|
</el-icon>上一题
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" size="large" @click="next" :disabled="nextDisable">
|
||||||
|
下一题<el-icon class="el-icon--right">
|
||||||
|
<ArrowRight />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subject-content">
|
||||||
|
<div class="subject-title">{{ questionNum + 1 + '、' + currentQuestion.question }}</div>
|
||||||
|
<el-radio-group v-model="currentQuestion.answer">
|
||||||
|
<el-radio :value="item.value" v-for="item in currentQuestion.options" :key="item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer v-if="nextDisable">
|
||||||
|
<div class="submit-footer">
|
||||||
|
<el-button class="submit-btn" type="primary" size="large">提交</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
const questionList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
question: '是否头疼',
|
||||||
|
options: [
|
||||||
|
{ id: 1, name: '没有', value: 1 },
|
||||||
|
{ id: 2, name: '很轻', value: 2 },
|
||||||
|
{ id: 3, name: '中等', value: 3 },
|
||||||
|
{ id: 4, name: '偏重', value: 4 },
|
||||||
|
{ id: 5, name: '严重', value: 5 },
|
||||||
|
{ id: 6, name: '一般般', value: 6 },
|
||||||
|
],
|
||||||
|
answer: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
question: '经常感到神经过敏、心中不踏实',
|
||||||
|
options: [
|
||||||
|
{ id: 1, name: '没有', value: 1 },
|
||||||
|
{ id: 2, name: '很轻', value: 2 },
|
||||||
|
{ id: 3, name: '中等', value: 3 },
|
||||||
|
{ id: 4, name: '偏重', value: 4 },
|
||||||
|
{ id: 5, name: '严重', value: 5 },
|
||||||
|
],
|
||||||
|
answer: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
question: '测试',
|
||||||
|
options: [
|
||||||
|
{ id: 1, name: '没有', value: 1 },
|
||||||
|
{ id: 2, name: '很轻', value: 2 }
|
||||||
|
],
|
||||||
|
answer: null
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const currentQuestion = ref(questionList.value[0])
|
||||||
|
|
||||||
|
const questionNum = ref(0)
|
||||||
|
|
||||||
|
const preDisable = computed(() => {
|
||||||
|
return questionNum.value === 0
|
||||||
|
})
|
||||||
|
|
||||||
|
function previous() {
|
||||||
|
questionNum.value--
|
||||||
|
if (questionNum.value <= 0) {
|
||||||
|
questionNum.value = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
currentQuestion.value = questionList.value[questionNum.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextDisable = computed(() => {
|
||||||
|
return questionNum.value === questionList.value.length - 1
|
||||||
|
})
|
||||||
|
|
||||||
|
function next() {
|
||||||
|
questionNum.value++
|
||||||
|
|
||||||
|
if (questionNum.value >= questionList.value.length) {
|
||||||
|
questionNum.value = questionList.value.length
|
||||||
|
}
|
||||||
|
|
||||||
|
currentQuestion.value = questionList.value[questionNum.value]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container-exam {
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 60px;
|
||||||
|
color: #CDCDCD;
|
||||||
|
background-color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 60%;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-indent: 2em;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject-btn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-footer {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject-content {
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 400px;
|
||||||
|
|
||||||
|
::v-deep .el-radio-group {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-radio {
|
||||||
|
display: block;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject-title {
|
||||||
|
color: #0F9AE0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-radio__label {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,245 @@
|
||||||
|
<script setup>
|
||||||
|
// 表单校验（账号名+密码）
|
||||||
|
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import 'element-plus/theme-chalk/el-message.css'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import { useUserStore } from '@/stores/userStore'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 1. 准备表单对象
|
||||||
|
const form = ref({
|
||||||
|
account: '18610848230',
|
||||||
|
password: '123456',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 2. 准备规则对象
|
||||||
|
const rules = {
|
||||||
|
account: [
|
||||||
|
{ required: true, message: '用户名不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||||||
|
{ min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 获取form实例做统一校验
|
||||||
|
const formRef = ref(null)
|
||||||
|
const router = useRouter()
|
||||||
|
const doLogin = () => {
|
||||||
|
const { account, password } = form.value
|
||||||
|
// 调用实例方法
|
||||||
|
formRef.value.validate(async (valid) => {
|
||||||
|
// valid: 所有表单都通过校验 才为true
|
||||||
|
console.log(valid)
|
||||||
|
// 以valid做为判断条件 如果通过校验才执行登录逻辑
|
||||||
|
if (valid) {
|
||||||
|
// TODO LOGIN
|
||||||
|
await userStore.getUserInfo({ account, password })
|
||||||
|
// 1. 提示用户
|
||||||
|
ElMessage({ type: 'success', message: '登录成功' })
|
||||||
|
// 2. 跳转首页
|
||||||
|
router.replace({ path: '/' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
|
||||||
|
// 2. 同意协议 自定义规则 validator:(rule,value,callback)=>{}
|
||||||
|
// 3. 统一校验 通过调用form实例的方法 validate -> true
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="login-section">
|
||||||
|
<div class="wrapper">
|
||||||
|
<nav>
|
||||||
|
<a href="javascript:;">账户登录</a>
|
||||||
|
</nav>
|
||||||
|
<div class="account-box">
|
||||||
|
<div class="form">
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
|
||||||
|
<el-form-item prop="account" label="学号">
|
||||||
|
<el-input v-model="form.account" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password" label="密码">
|
||||||
|
<el-input v-model="form.password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
.login-section {
|
||||||
|
background: url('@/assets/images/login-bg.jpg') no-repeat center / cover;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 450px;
|
||||||
|
height: 250px;
|
||||||
|
background: #fff;
|
||||||
|
transform: translate3d(100px, 0, 0);
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 30px 30px 30px 30px;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 55px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 40px;
|
||||||
|
text-align: right;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-box {
|
||||||
|
.toggle {
|
||||||
|
padding: 15px 40px;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $xtxColor;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
position: relative;
|
||||||
|
height: 36px;
|
||||||
|
|
||||||
|
>i {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
background: #cfcdcd;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
left: 1px;
|
||||||
|
top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 34px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding-left: 44px;
|
||||||
|
border: 1px solid #cfcdcd;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
border-color: $priceColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&:focus {
|
||||||
|
border-color: $xtxColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
position: absolute;
|
||||||
|
right: 1px;
|
||||||
|
top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 34px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #666;
|
||||||
|
width: 90px;
|
||||||
|
height: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>.error {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: $priceColor;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree {
|
||||||
|
a {
|
||||||
|
color: #069;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background: $xtxColor;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
background: #cfcdcd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
padding: 20px 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.url {
|
||||||
|
a {
|
||||||
|
color: #999;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subBtn {
|
||||||
|
background: $xtxColor;
|
||||||
|
margin-left: 40px;
|
||||||
|
width: 90%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
|
||||||
|
|
||||||
|
// element-plus按需要导入
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
|
||||||
|
import Icons from 'unplugin-icons/vite'
|
||||||
|
import IconsResolver from 'unplugin-icons/resolver'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueSetupExtend(),
|
||||||
|
AutoImport({
|
||||||
|
//自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
|
||||||
|
imports: ['vue', 'vue-router', 'pinia'],
|
||||||
|
resolvers: [
|
||||||
|
IconsResolver({
|
||||||
|
prefix: 'Icon'
|
||||||
|
}),
|
||||||
|
ElementPlusResolver()
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
// 配置element-plus采用sass样式配置系统
|
||||||
|
resolvers: [
|
||||||
|
IconsResolver({
|
||||||
|
enabledCollections: ['ep']
|
||||||
|
}),
|
||||||
|
ElementPlusResolver({ importStyle: 'sass' })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
Icons({
|
||||||
|
autoInstall: true
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
// 实际路径转换 @ -> src
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
// 自动导入定制化样式文件进行样式覆盖
|
||||||
|
additionalData: `
|
||||||
|
@use "@/styles/element/index.scss" as *;
|
||||||
|
@use "@/styles/var.scss" as *;
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue