Vue项目实战
一、项目介绍
- 优选商城pc端
- 旅途移动端web项目（H5）
- 后台管理系统 ts + vue3
常见前端项目的UI库
后台管理系统：element UI 、Ant-Design
小程序：vant
移动端web：vant
门户网站：局部引入UI库
海外：Material UI 规范 react\mui，vue\vuetify
二、项目实战
1.创建项目
方式一：Vue CLI
- 基于webpack工具
- 命令: vue create
方式二: create-vue
- 基于vite工具
- 命令：npm init vue@latest
项目配置
- 配置项目的icon
- 配置项目的标题
- 配置jsconfig.json
2.项目目录结构划分
src
|-assets -- 存放静态资源，比如css/images/font等
|-components -- 存放公共组件
|-composables -- 组合式函数
|-mock -- 模拟测试数据
|-router -- 路由
|-services -- 接口
|-stores -- 状态管理，比如pinia、vuex
|-utils -- 工具包
|-views -- 页面
|-App.vue
|-main.js
|-gitignore
|-index.html
|-jsconfig.json
|-package-lock.json
|-package.json
|-README.md
|-vite.config.js
3.CSS样式重置
对默认CSS样式进行重置:
- normalize.css
- reset.css
npm i normalize.css --save
main.js
import 'normalize.css'
assets/css/reset.css
/* 自定义的css */
a {
text-decoration: none;
color: #333;
}
assets/css/index.css
/* 作为css文件的入口统一导入 */
@import './reset.css';
@import './common.css';
4.路由配置
router/index.js
import {createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue'),
},
],
})
export default router
main.js
import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
import router from './router'
import 'normalize.css'
import '@/assets/css/index.css'
const app = createApp(App)
app.use(router)
app.mount('#app')
5.状态管理配置
stores/index.js
import {createPinia} from "pinia";
const pinia = createPinia()
export default pinia
stores/modules/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
// 也可以这样定义
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})
三、开发中会遇到的问题
1.修改第三方UI组件库的样式
1.用插槽,插入自己的元素那么在自己的作用域中直接修改这个元素
2.全局定义一个变量,覆盖它默认变量的值 *缺点: 全局修改
3.局部定义一个变量,覆盖它默认变量的值 !优点: 局部修改
4.直接查找对应的子组件选择器,进行修改:deep(子组件中元素的选择器)进行修改直接修改CSS
2.vite中动态加载图片
const getAssetUrl = (image) => {
// 参数一： 相对路径
// 参数二： 当前路径的url
const url = `../assets/images/${image}`;
return new URL(url, import.meta.url).href;
};
3.tabs选项与滚动内容匹配算法
该算法同样适用于歌词匹配
const titlePositionMap = {
'设施': 300,
'房东': 500,
'评论': 700,
'须知': 1000,
}
// 当前滚动高度
let newValue = 424;
const offsetTopArr = Object.values(titlePositionMap);
let currentIndex = offsetTopArr.length - 1;
// 遍历tabs每个选项的高度，找到当前高度所在的选项索引值
for (let i = 0; i < offsetTopArr.length; i++) {
if (newValue + 44 < offsetTopArr[i]) {
currentIndex = i - 1;
break;
}
}
tabRef.value.currentIndex = currentIndex < 0 ? 0 : currentIndex;
4.集成百度地图SDK
1.注册百度账号，登录百度地图开发平台
2.打开控制台>应用管理>我的应用，点击创建应用
3.输入应用名称，选择浏览器端，点击确认
4.复制访问应用的ak用于后续的接口调用
index.html
DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Vite Apptitle>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&&type=webgl&ak=[输入复制的ak]">script>
head>
<body>
<div id="app">div>
<script type="module" src="/src/main.js">script>
body>
html>
map.vue
5.组合式函数
在项目中一些公共人物的逻辑可以封装成一个组合式函数进行复用，比如监听页面滚动函数：
useScroll.js
import { throttle } from 'underscore'
export default function useScroll (elRef) {
let el = window;
const reachBottom = ref(false);
const clientHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
// 节流操作
const loadMoreHandler = throttle(() => {
if (el === window) {
clientHeight.value = document.documentElement.clientHeight;
scrollTop.value = document.documentElement.scrollTop;
scrollHeight.value = document.documentElement.scrollHeight;
} else {
clientHeight.value = el.clientHeight;
scrollTop.value = el.scrollTop;
scrollHeight.value = el.scrollHeight;
}
if (scrollHeight.value - scrollTop.value <= clientHeight.value) {
reachBottom.value = true
}
}, 100)
onMounted(() => {
if (elRef) {
el = elRef.value;
}
el.addEventListener("scroll", loadMoreHandler)
})
onActivated(() => {
el.addEventListener("scroll", loadMoreHandler)
})
onUnmounted(() => {
el.removeEventListener("scroll", loadMoreHandler)
})
onDeactivated(() => {
el.removeEventListener("scroll", loadMoreHandler)
})
return {
reachBottom,
clientHeight,
scrollTop,
scrollHeight,
}
}
6.vue中的函数模板引用
在vue中需要直接访问底层 DOM 元素时，不仅仅可以使用ref字符串作为名字，还可以使用函数
注意我们这里需要使用动态的
:ref绑定才能够传入一个函数。当绑定的元素被卸载时，函数也会被调用一次，此时的el参数会是null。