目录
一、创建项目
1. 安装vite
2. 创建项目
3. 安装过程
二、项目基本配置
1. 项目icon
2. 项目标题
3. 配置 jsconfig.json
4. 设置 .prettierrc 文件
5. 生成代码片段
01 – 网址
02 – 生成
03 – 配置
04 – 使用
三、项目目录 结构划分
1. assets
2. components
3. hooks
4. mock
5. router
6. service
7. stores
8. utils
9. views
四、css 样式重置
1. normalize.css
01 – 安装
02 – 引入
2. reset.css
01 – 代码
02 – 引入
3. common.css
01 – 代码
02 – 引入
五、vue-router 路由配置
1. 安装
2. 配置
3. 引入
4. 使用
六、pinia 状态管理
1. 安装
2. 创建
3. 引入
4. 模块
七、把代码推送到远程仓库
1. 初始化git仓库
2. 配置 name 和 email
3. 提交代码到本地
4. 生成远程仓库
5. 本地和远程连接
八、项目正在开发中
1. 使用百度地图插件
01 -注册并登录百度账号百度地图开放平台 | 百度地图API SDK | 地图开发
02 – 成为开发者
点击控制台
填写资料进行注册
03 – 创建应用
创建应用
获取AK
04 -使用JavaScript API文档
复制js代码，在index.html中引入
展示地图
效果
2. 监听页面的滚动
01 – 封装usePageScroll.js
02 – 使用
03 – 效果
3. 加载assets文件夹中的图片
01 – 封装load_assets.js
02 – 使用
一、创建项目
1. 安装vite
npm i vite -g2. 创建项目
npm init vue@latest3. 安装过程
二、项目基本配置
1. 项目icon
在 public目录 下，添加一个 favicon.icon 图片
2. 项目标题
在 index.html 文件的 title标签 中配置
3. 配置 jsconfig.json
能让 代码提示 变得更加友好
{ "compilerOptions": { // "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "vueCompilerOptions": { "experimentalDisableTemplateSupport": true }}4. 设置 .prettierrc 文件
{ "printWidth": 120, "singleQuote": true, "bracketSpacing": true, "jsxBracketSameLine": false, "htmlWhitespaceSensitivity": "ignore", "useTabs": false, "tabWidth": 2, "endOfLine": "lf", "trailingComma": "none", "semi": true, "eslintIntegration": true}5. 生成代码片段
01 – 网址
代码片段生成网址 :snippet generator
02 – 生成
"vue3": {"prefix": "vue3","body": [" import { onMounted, ref } from 'vue';const detailMapRef = ref(null);onMounted(() => { // 2. 创建地图实例，传入地图容器，地图容器的ID为detailMapRef，即上面的，地图容器必须是一个独立的div const map = new BMapGL.Map(detailMapRef.value); // 3. 创建点坐标，经度116.404，纬度39.915，可以通过百度地图API获取，也可以自己设置 const point = new BMapGL.Point(116.404, 39.915); // 4. 初始化地图，设置中心点坐标和地图级别, 15为地图级别，数值越大，地图越精细 map.centerAndZoom(point, 15); // 5. 创建标注，传入坐标 var marker = new BMapGL.Marker(point); // 6. 将标注添加到地图中 map.addOverlay(marker);});.detail-map-view { width: 100%; height: 300px; .detail-map { width: 100%; height: 100%; }}效果
2. 监听页面的滚动
01 – 封装usePageScroll.js
import { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue';import { throttle } from 'underscore';export default function usePageScroll(domRef) { // 默认监听window窗口滚动事件 let dom = window; // 是否滚动到底部 const isArriveBottom = ref(false); // 滚动条滚动高度 const scrollTop = ref(0); // 页面可视区域高度 const scrollHeight = ref(0); // 页面总高度 const clientHeight = ref(0); const scrollListen = throttle(() => { // 如果传入了domRef，则获取domRef的高度的值,否则获取window窗口的高度 const heightData = domRef " /> 列表数据:{{ item }} import usePageScroll from '@/hooks/usePageScroll';import { ref, watchEffect } from 'vue';const favorViewRef = ref(null);const { scrollTop } = usePageScroll(favorViewRef);watchEffect(() => { console.log(scrollTop.value);});.favor-view { height: 300px; overflow-y: auto;}03 – 效果
3. 加载assets文件夹中的图片
在vite中，加载图片须得转换一下
01 – 封装load_assets.js
export const getAssetURL = (image) => { // 参数一: 相对当前路径来配置路径 // 参数二: 当前路径的URL return new URL(`../assets/img/${image}`, import.meta.url).href}02 – 使用