文件资源目录 📚
├─ .husky # husky 配置文件
├─ .vscode # VSCode 推荐配置
├─ build # Vite 配置项
├─ public # 静态资源文件（该文件夹不会被打包）
├─ src
│ ├─ api # API 接口管理
│ ├─ assets # 静态资源文件
│ ├─ components # 全局组件
│ ├─ config # 全局配置项
│ ├─ directives # 全局指令文件
│ ├─ enums # 项目常用枚举
│ ├─ hooks # 常用 Hooks 封装
│ ├─ languages # 语言国际化 i18n
│ ├─ layouts # 框架布局模块
│ ├─ routers # 路由管理
│ ├─ stores # pinia store
│ ├─ styles # 全局样式文件
│ ├─ typings # 全局 ts 声明
│ ├─ utils # 常用工具库
│ ├─ views 或 pages # 项目所有页面-路由组件
│ ├─ App.vue # 项目主组件
│ ├─ main.ts # 项目入口文件
│ └─ vite-env.d.ts # 指定 ts 识别 vue
├─ .editorconfig # 统一不同编辑器的编码风格
├─ .env # vite 常用配置
├─ .env.development # 开发环境配置
├─ .env.production # 生产环境配置
├─ .env.test # 测试环境配置
├─ .eslintignore # 忽略 Eslint 校验
├─ .eslintrc.cjs # Eslint 校验配置文件
├─ .gitignore # 忽略 git 提交
├─ .prettierignore # 忽略 Prettier 格式化
├─ .prettierrc.cjs # Prettier 格式化配置
├─ .stylelintignore # 忽略 stylelint 格式化
├─ .stylelintrc.cjs # stylelint 样式格式化配置
├─ CHANGELOG.md # 项目更新日志
├─ commitlint.config.cjs # git 提交规范配置
├─ index.html # 入口 html
├─ LICENSE # 开源协议文件
├─ lint-staged.config.cjs # lint-staged 配置文件
├─ package-lock.json # 依赖包包版本锁
├─ package.json # 依赖包管理
├─ postcss.config.cjs # postcss 配置
├─ README.md # README 介绍
├─ tsconfig.json # typescript 全局配置
└─ vite.config.ts # vite 全局配置文件
启动项目浏览器自动打开
//package.json
"dev": "vite --open",
配置@路径
//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入node
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})
使用TS需要安装@types/node，是ts的声明文件包，用于描述Node.js核心模块和常用的第三方库的类型信息
pnpm i @types/node
找到tsconfig.json配置文件，找到配置项compilerOptions，这一步作用是让IDE可以对路径智能提示
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
},
#vue3导入模块报红解决方案——找不到模块“./XXX.vue”或其相应的类型声明 解决 vue3导入模块报红解决方案——找不到模块“./XXX.vue”或其相应的类型声明_import type { definecomponent } from 'vue'报错怎么解决-CSDN博客
配置Sass
pnpm i sass
pnpm install sass-loader -S`
pnpm install style-loader -S
在vite中用，配置全局变量，
然后在main.js引入 共享选项 | Vite 官方中文文档 (vitejs.dev)
css: {
preprocessorOptions: {
scss: {
additionalData: ``,
},
},
},
清除默认样式npm下载
地址reset.scss - npm (npmjs.com) src/style/reset.scss
//清除默认样式
import '@/style/reset.scss'
配置全局组件
//配置全局组件
//引入
import HospitalTop from '@/components/hospital_top/index.vue'
app.component('HospitalTop', HospitalTop)
配置路由
安装
pnpm i vue-router
准备文件
- src/pages pages 放路由组件
- src/router/index.ts 配置路由
import { createRouter, createWebHashHistory } from 'vue-router'
//createRouter创建路由器实例，管理多个路由
export default createRouter({
//路由模式
history: createWebHashHistory(),
//管理路由
routes: [
{
path: '/home',
component: () => import('@/pages/home/index.vue'),
},
{
path: '/hospital',
component: () => import('@/pages/hospital/index.vue'),
},
//为根，重定向到home
{
path: '/',
redirect: '/home',
},
],
//滚动行为：控制滚动条位置,切换组件回到顶部
scrollBehavior() {
return {
left: 0,
top: 0,
}
},
})
在main.ts配置
//引入vue-router核心插件并安装
import router from '@/router/index'
//安装vue-router
app.use(router)
APP.vue中展示
//APP.vue文件
<template>
<div class="container">
<!-- 顶部全局组件 -->
<HospitalTop></HospitalTop>
<!-- 展示路由组件 -->
<div class="content">
//展示区域
<router-view></router-view>
</div>
<!-- 底部全局组件 -->
<HospitalBottom></HospitalBottom>
</div>
</template>
路由跳转
<script setup lang="ts" >
import { useRouter } from 'vue-router'
//创建路由器实例
let $router = useRouter()
const goDetail = () => {
$router.push({ path: '/hospital' })
}
</script>
UI组件
配置element-plus
快速开始 | Element Plus (element-plus.org)
pnpm i element-plus
配置main.ts (全局引入)
//引入element-plus插件与样式,及国际化
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//Element Plus 提供了全局配置国际化的配置(默认英文)
//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败); mjs没有ts类型
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//安装
// app.use(ElementPlus);
app.use(ElementPlus, {
locale: zhCn,
})
按需引入
npm install -D unplugin-vue-components unplugin-auto-import
#### Volar
如果您使用 Volar，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。这样在ts里就有输入提示
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
很有可能报错：-------------# 找不到“element-plus/global”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 “element-plus/global“
在src下新建vite-env.d.ts文件 解决方案是修改 vite-env.d.ts，增加：
declare module "*.vue" {
import { DefineComponent } from "vue"
const component: DefineComponent<{}, {}, any>
export default component
}
按需引入element图标
pnpm install @element-plus/icons-vue
文件中使用
<script setup lang="ts" >
//按需引入
import { Search,Edit } from '@element-plus/icons-vue'
</script>
注册所有图标#
您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
// main.ts
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
Vant3
npm i vant
配置axios
pnpm i axios
二次封装 src/utils/request.ts 工具性文件放到utils中
你工作的时候是否axios进行二次封装?二次封装的目的是什么?
1:利用axios请求、响应拦截器功能
2:请求拦截器,一般可以在请求头中携带公共的参数:token
3:响应拦截器,可以简化服务器返回的数据,处理http网络错误
//进行axios二次封装:使用请求与响应拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'
//引入用户相关的仓库
import useUserStore from '@/store/modules/user'
//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
const request = axios.create({
//基础路径
baseURL: '/api', //基础路径上会携带/api
timeout: 5000, //超时的时间的设置，超时就失败
})
//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
//获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器
const userStore = useUserStore()
if (userStore.token) {
config.headers.token = userStore.token
// console.log(userStore.token)
}
//config配置对象,headers属性请求头,经常给服务器端携带公共参数
//返回配置对象
//config
return config
})
//第三步:响应拦截器
request.interceptors.response.use(
(response) => {
//成功回调
//简化数据
return response.data
},
(error) => {
//失败回调:处理http网络错误的
//定义一个变量:存储网络错误信息
let message = ''
//http状态码
const status = error.response.status
switch (status) {
case 401:
message = 'TOKEN过期'
break
case 403:
message = '无权访问'
break
case 404:
message = '请求地址错误'
break
case 500:
message = '服务器出现问题'
break
default:
message = '网络出现问题'
break
}
//提示错误信息
ElMessage({
type: 'error',
message,
})
return Promise.reject(error)
},
)
//对外暴露
export default request
配置代理跨域
开发服务器选项 | Vite 官方中文文档 (vitejs.dev)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
//代理跨越
server: {
port: 8002, //端口号
host: '0.0.0.0',
open: true, //自动打开
proxy: {
'/api': {
target: 'http://syt.atguigu.cn', //服务器地址
changeOrigin: true, // 是否改变请求头中的Origin字段，默认为false
rewrite: (path) => path.replace(/^\/api/, '') // 路径重写规则，将所有以/api开头的请求路径去掉/api前缀
}
},
},
},
})
配置pinia
pnpm i pinia
import { createPinia } from 'pinia'
//对外暴露大仓库
export default createPinia()
//引入
import pinia from '@/store/index'
//安装仓库
app.use(pinia)
//定义小仓库 在仓库中发请求获取数据，存储，为其它组件提供数据
import { defineStore } from 'pinia'
//组合式写法
const useDetailStore = defineStore('Detail', {
state: () => {
return {}
},
actions: {},
getters: {},
})
export default useDetailStore
组件中使用
import useDetailStore from '@/store/modules/hospitalDetail'
//获取仓库对象
let detailStore = useDetailStore()
detailStore. //使用仓库中的数据/方法
使用animate.css动画库
pnpm i animate.css -S
<Transition :duration="500"
leave-active-class="animate__animated animate__backOutLeft">
</Transition>
<script lang="ts" setup>
//引入
import 'animate.css'
</script>
使用lodash
pnpm i lodash -S
在Ts在使用还需要装声明文件
pnpm i @types/lodash -D
使用
// 全量引入
import * as _ from "lodash"
// 实际开发中推荐按需引入，减少打包体积
import join from "lodash/join"
配置echarts
npm install echarts
配置ESLint
1.安装
npm install eslint -D
2.执行
npx seslint --init
选择要检查的内容（箭头切换）
1.检查语法
2.检查语法并发现问题
3.检查语法并发现问题，并强制执行代码风格
进行配置选项
package.json
配置国际化i18n
element-plus 配置国际化
i18n
npm install vue-i18n@next -s
在 src 目录下新建 lang 文件夹，并包含index.ts , lang / en.ts , lang / zh.ts(做中英文切换)
1.创建实例
2.挂载app上
3.使用
配置Vueuse
起步 | VueUse中文文档 (vueusejs.com)
npm i @vueuse/core
