优医问诊H5clone管理端项目
bash
git clone https://gitee.com/luckybo0027/hmzs-admin.git使用create-vue初始化项目
bash
npm init vue@latest
项目准备
素材准备
复制素材assets文件夹下的图片
为 @ 添加代码提示
根目录jsconfig.json : jsconfig.json
json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}开启自动格式化
.vscode\settings.json
json
{
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
}
}准备utils模块
业务背景：大屏项目属于后台项目的一个子项目，用户的token是共享的，所以大屏项目以同样的方式去cookie中获取token
封装cookies存取模块
bash
npm i js-cookiesrc\utils\cookie.js
javascript
import Cookies from 'js-cookie'
const KEY = 'token_key'
export function getCookie () {
return Cookies.get(KEY)
}
export function setCookie (value) {
Cookies.set(KEY, value)
}
export function removeCookie () {
Cookies.remove(KEY)
}封装request请求模块
bash
npm i axiossrc\utils\request.js
javascript
import axios from 'axios'
import { getCookie } from './cookie'
const service = axios.create({
baseURL: 'https://api-hmzs.itheima.net/v1',
timeout: 5000 // request timeout
})
// 请求拦截器
service.interceptors.request.use(
config => {
const token = getCookie()
if (token) {
config.headers.Authorization = token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
return Promise.reject(error)
}
)
export default service路由搭建
- 创建页面组件
src/views/BigScreenView.vue
vue
<script setup>
</script>
<template>
<div>我是大屏显示组件</div>
</template>- 配置路由规则
src/route.js
javascript
import { createRouter, createWebHistory } from 'vue-router'
// 导入路由级别的组件
import BigScreenView from '../views/BigScreenView.vue'
const router = createRouter({
// 类似于mode:history 指定路由为history模式
history: createWebHistory(import.meta.env.BASE_URL),
// 配置路由path和component对应关系
routes: [
{
path: '/',
redirect: '/big-screen',
},
{
path: '/big-screen',
name: 'BigScreenView',
component: BigScreenView,
}
]
})
export default router- 设置挂载点
src/App.vue
vue
<script setup>
</script>
<template>
<router-view />
</template>安装sass
create-vue创建的项目默认不支持scss语法，需要我们手动安装sass
bash
npm i sasssrc/styles/common.scss
scss
html,
body,
#app {
height: 100vh;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}src/main.js
js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './styles/common.scss'
const app = createApp(App)
app.use(router)
app.mount('#app')