一、创建项目

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 -g

2. 创建项目

npm init vue@latest

3. 安装过程

二、项目基本配置

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": [
		"<!-- ? ${2}模块 -->",
		"<template>",
		"  <div class=\"${1}-view\">",
		"    <h2>${1}</h2>",
		"  </div>",
		"</template>",
		"",
		"<script setup>",
		"import { ref } from 'vue';",
		"</script>",
		"",
		"<style lang=\"scss\" scoped>",
		".${1}-view {",
		"}",
		"</style>",
		""
	],
	"description": "vue3"
}

03 - 配置

设置 => 配置用户代码片段 => vue.json => copy

04 - 使用

使用设置的title即可 => tab键切换占位符1. 2. 3. 4 ...

三、项目目录结构划分

1. assets

存放 => 静态资源

css => 样式重置
img => 图片文件
font => 字体文件

2. components

存放 => 公共组件

3. hooks

存放 => 公共常用的hook

4. mock

存放 => 模拟接口数据

5. router

存放 => 路由管理

6. service

存放 => 接口请求

7. stores

存放 => 状态管理

8. utils

存放 => 插件、第三方插件

9. views

存放 => 视图、页面

四、css 样式重置

自定义的css公共文件放置在assets中的css文件中即可

1. normalize.css

01 - 安装

npm i normalize.css

02 - 引入

// 在 main.js 中引入
import 'normalize.css';

2. reset.css

01 - 代码

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 font,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 caption {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: 100%;
     vertical-align: baseline;
     background: transparent;
 }
 
 table,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td {
     margin: 0;
     padding: 0;
     outline: 0;
     font-size: 100%;
     vertical-align: baseline;
     background: transparent;
 }
 
 button,
 input,
 textarea {
     margin: 0;
     padding: 0;
 }
 
 
 /* form elements 表单元素 */
 
 body,
 button,
 input,
 select,
 textarea {
     font: normal 12px/1.5 '\5FAE\8F6F\96C5\9ED1', tahoma, arial;
 }
 
 
 /*设置的字体，行高*/
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 th {
     font-size: 100%;
     font-weight: normal;
 }
 
 
 /*重置标题*/
 
 address,
 cite,
 dfn,
 var {
     font-style: normal;
 }
 
 
 /* 将斜体扶正 */
 
 code,
 kbd,
 pre,
 samp {
     font-family: 'courier new', courier, monospace;
 }
 
 
 /* 统一等宽字体 */
 
 small {
     font-size: 12px;
 }
 
 
 /* 小于 12px 的中文很难阅读，让 small 正常化 */
 
 ul,
 ol {
     list-style: none;
 }
 
 
 /* 重置列表元素 */
 
 button,
 input[type="submit"],
 input[type="button"] {
     cursor: pointer;
 }
 
 input[type="radio"],
 input[type="checkbox"],
 input[type="submit"],
 input[type="reset"] {
     vertical-align: middle;
     cursor: pointer;
     border: none;
 }
 
 
 /** 重置文本格式元素 **/
 
 a {
     text-decoration: none;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 a:focus {
     outline: 0;
 }
 
 sup {
     vertical-align: text-top;
 }
 
 
 /* 重置，减少对行高的影响 */
 
 sub {
     vertical-align: text-bottom;
 }
 
 
 /** 重置表单元素 **/
 
 legend {
     color: #000;
 }
 
 
 /* for ie6 */
 
 fieldset,
 img {
     border: 0;
 }
 
 
 /* img 搭车：让链接里的 img 无边框 */
 
 button,
 input,
 select,
 textarea {
     background: transparent;
     font-size: 100%;
     outline: 0;
 }
 
 
 /* 使得表单元素在 ie 下能继承字体大小 */
 
 
 /* 注：optgroup 无法扶正 */
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 td,
 th {
     vertical-align: middle;
 }
 
 
 /** 重置表格元素 **/
 
 
 /* 重置 HTML5 元素 */
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     display: block;
     margin: 0;
     padding: 0;
 }
 
 
 /*回复标签重置*/
 
 blockquote,
 q {
     quotes: none;
 }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
     content: '';
     display: none;
 }

02 - 引入

// 在 main.js 中引入
import './assets/css/reset.css';

3. common.css

01 - 代码

// 清除浮动
.clearfix {
  *zoom: 1;
}

......

02 - 引入

// 在 main.js 中引入
import './assets/css/common.css';

五、vue-router 路由配置

Vue3 之 Vue - Router_玄鱼殇的博客-CSDN博客

1. 安装

npm i vue-router

2. 配置

在 router文件夹 中的 index.js 中进行配置

// 1. 导入
import { createRouter, createWebHashHistory } from 'vue-router';

// 2. 创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: () => import('xxx/home.vue')
    }
  ]
});

// 3. 导出
export default router;

3. 引入

// main.js

import { createApp } from 'vue';
import App from './App.vue';
// 1. 导入
import router from './router';

import 'normalize.css';
import './assets/css/reset.css';
import './assets/css/common.css';

// 2. 使用
createApp(App).use(router).mount('#app');

4. 使用

在该用的地方加上 <router-view/>

六、pinia 状态管理

Vue3 之 Pinia - 状态管理_玄鱼殇的博客-CSDN博客

1. 安装

npm i pinia

2. 创建

在 stores文件夹 中创建 index.js

// 1. 导入
import { createPinia } from 'pinia'
// 2. 创建
const pinia = createPinia()
// 3. 导出
export default pinia

3. 引入

// main.js

import { createApp } from 'vue';
import App from './App.vue';
// 1. 导入
import router from './router';

import 'normalize.css';
import './assets/css/reset.css';
import './assets/css/common.css';

// 2. 使用
createApp(App).use(router).mount('#app');

4. 模块

在 stores文件夹 中创建 modules , 在其中创建模块

// 1. 导入
import { defineStore } from 'pinia';

// 2. 使用
const useDemoStore = defineStore('demoStore', {
  state: () => ({
    arrList: []
  }),
  actions: {},
  getters: {}
});

// 3. 导出
export default useDemoStore;

七、把代码推送到远程仓库

版本控制工具之 Git_玄鱼殇的博客-CSDN博客

1. 初始化git仓库

git init

2. 配置 name 和 email

这里设定的是针对该仓库的配置

git config --local user.name 'xxxx'

git config --local user.email 'xxxx@qq.com'

3. 提交代码到本地

git add .

git commit -m 'feat: 项目初始化'

4. 生成远程仓库

5. 本地和远程连接

git remote add origin https://xxxxxx.git

git push -u origin master

八、项目正在开发中 🌰

1. 使用百度地图插件

01 - 注册并登录百度账号百度地图开放平台 | 百度地图API SDK | 地图开发

02 - 成为开发者

点击控制台

填写资料进行注册

03 - 创建应用

应用管理 > 我的应用

创建应用

获取AK

04 - 使用JavaScript API文档

jspopularGL | 百度地图API SDK

ps : 可查看hello world

复制js代码，在index.html中引入

<!-- 这里使用了3.0的版本，把AK复制上去 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密钥">
</script>

展示地图

<!-- ? 地图模块 -->
<template>
  <div class="detail-map-view">
    <!-- 1. 地图需要一个HTML元素作为容器 -->
    <div class="detail-map" ref="detailMapRef"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const detailMapRef = ref(null);
onMounted(() => {
  // 2. 创建地图实例，传入地图容器，地图容器的ID为detailMapRef，即上面的<div>，地图容器必须是一个独立的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);
});
</script>

<style lang="less" scoped>
.detail-map-view {
  width: 100%;
  height: 300px;
  .detail-map {
    width: 100%;
    height: 100%;
  }
}
</style>

效果

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 ? domRef.value : document.documentElement;

    // 获取滚动条滚动高度，已经滚动的距离
    scrollTop.value = heightData.scrollTop;
    // 获取页面总高度
    scrollHeight.value = heightData.scrollHeight;
    // window => 获取可见区域高度 (667)
    clientHeight.value = heightData.clientHeight;
    // const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    // 判断是否滚动到底部  =>  滚动高度 + 可视区域高度 >= 总高度时，加载更多
    if (scrollTop.value + clientHeight.value >= scrollHeight.value) {
      // 滚动到底部
      console.log('滚动到底部了');
      isArriveBottom.value = true;
    }
    // console.log(scrollTop.value, scrollHeight.value, clientHeight.value);
  }, 100);
  // 监听window窗口滚动事件
  onMounted(() => {
    // 如果传入了domRef，则监听domRef的滚动事件
    if (domRef) dom = domRef.value;
    dom.addEventListener('scroll', scrollListen);
  });
  onActivated(() => {
    dom.addEventListener('scroll', scrollListen);
  });
  // 取消监听window窗口滚动事件
  onUnmounted(() => {
    dom.removeEventListener('scroll', scrollListen);
  });
  onDeactivated(() => {
    dom.removeEventListener('scroll', scrollListen);
  });
  // 返回数据
  return { isArriveBottom, scrollTop, scrollHeight, clientHeight };
}

02 - 使用

<!-- ? 收藏模块 -->
<template>
  <div class="favor-view" ref="favorViewRef">
    <template v-for="item in 100">
      <div>列表数据:{{ item }}</div>
    </template>
  </div>
</template>

<script setup>
import usePageScroll from '@/hooks/usePageScroll';
import { ref, watchEffect } from 'vue';

const favorViewRef = ref(null);
const { scrollTop } = usePageScroll(favorViewRef);

watchEffect(() => {
  console.log(scrollTop.value);
});
</script>

<style lang="less" scoped>
.favor-view {
  height: 300px;
  overflow-y: auto;
}
</style>

03 - 效果

3. 加载assets文件夹中的图片

在vite中，加载图片须得转换一下

01 - 封装load_assets.js

export const getAssetURL = (image) => {
  // 参数一: 相对当前路径来配置路径
  // 参数二: 当前路径的URL
  return new URL(`../assets/img/${image}`, import.meta.url).href
}

02 - 使用

<!-- ? 底部tabber模块 -->
<template>
   <img  class="icon" :src="getAssetURL('tabbar/tab_favor.png')" />
</template>

<script setup>
import { getAssetURL } from '@/utils/load_assets';
</script>