# my-vue

**Repository Path**: xuedejin/my-vue

## Basic Information

- **Project Name**: my-vue
- **Description**: vue课程项目练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-19
- **Last Updated**: 2025-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, vite, Pinia, vue-router

## README

# 一、create vue 创建项目流程

```sh
npm create vue
```

## 项目名称：

my-vue-project

## 常用选项:

TypeScript
Vue Router
Pinia
ESLint
Prettier

## 进入项目目录

```sh
cd my-vue-project
```

## 安装依赖

```sh
npm install
```

## 运行项目

```sh
npm run dev
```

# 二、代码格式设置

## .eslintrc.cjs

在.eslintrc.cjs文件中添加rules,取消vue组件命名多单词限制

```cjs
module.exports = {
  rules: {
    'vue/multi-word-component-names': 'off',
  },
};
```

## .prettierrc.json

```json
{
  "semi": false, // 是否保存自动添加末尾分号
  "tabWidth": 2, // 指定一个制表符等于的空格数
  "singleQuote": true, // 使用单引号而不是双引号
  "printWidth": 100, // 每行代码长度限制
  "trailingComma": "all" // 是否保存自动添加末尾逗号
}
```

# 三、环境变量配置

在项目目录下新建.env.development和.env.production两个文件，常用于给开发环境和生产环境配置不同的api，项目上线之后就不需要改了

## .env.development 用于配置开发环境变量

VITE_HELLO=开发环境

## .env.production 用于配置生产环境变量

VITE_HELLO=生产环境

## 读取开发环境变量

```ts
console.log(import.meta.env.VITE_HELLO);
```

## 读取生产环境变量

Open with Live Server 运行打包后的html文件即可读取

```sh
npm run build
```

## env.d.ts

可以在env.d.ts文件中编写一些项目环境变量的类型描述

```ts
interface ImportMetaEnv {
  VITE_HELLO: string;
  VITE_API: string;
}
```

# 四、自动导入插件

## 自动导包插件

1. 安装自动导包插件

```sh
npm i -D unplugin-auto-import
```

2. 配置自动导包插件

在vite.config.ts中配置自动导包插件

```ts
// vite.config.ts
// 导入自动导包的插件
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      //  imports用来指定需要自动导入的包
      imports: ['vue', 'vue-router', 'pinia'],
      // 自动生成类型描述文件
      dts: './src/types/auto-imports.d.ts',
      // 指定一个目录，目录下的文件会被自动导入
      dirs: ['./src/**/*'],
      // 是否支持在vue模版中使用自动导入
      vueTemplate: true,

      //   imports: [
      //     {
      //       // 可以指定要导谁，也可以指定别名
      //       vue: [['ref', 'hello'], 'computed'],
      //     },
      //     'vue-router',
      //     'pinia',
      //   ],
    }),
  ],
});
```

## 自动导入vue组件插件

1. 安装自动导入vue组件插件

```sh
npm i unplugin-vue-components -D
```

2. 配置自动导入vue组件插件

```ts
// vite.config.ts
// 导入自动导vue组件的插件
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs:['./src/components','./src/layout']
      dts: './src/types/components.d.ts',
    }),
  ],
})
```

# 五、样式初始化

1. 修改hmtl的en为zh，替换图标，title等,新建文件夹src/assets/style用于存放样式文件

2. 安装sass，重置样式表

```sh
npm i sass -D
npm i normalize.css
```

3. 创建index.scss，并引入normalize.css

```scss
@import 'normalize.css';
```

4. 将index.scss引入到main.ts

```ts
import '@/assets/style/index.scss';
```

5. 新建variables.css，用户存放css变量，并引入到index.scss

```scss
@import 'variables.css';
```

6. 移动端适配

```scss
@import 'normalize.css';
@import 'variables.css';
// 移动端项目
// 设计尺寸：375 414 750 1125
html {
  font-size: calc(100vw / 375);
}

body {
  font: 12px 'Microsoft YaHei';
}
```

7. scoped的作用
<!--
  scoped
    style标签设置scoped后，样式只会在当前组件中生效
    它的实现原来是：
      vue会为当前组件中的元素都添加一个唯一的属性
      设置样式时，所有的选择器都会被添加一个属性选择器
      h1 -> h1[data-v-7a7a37b1]
    除了为组件中元素设置属性外，他也会为子组件添加属性
      但只会影响子组件的根元素
 -->

# 六、配置router

1. 新建src/views文件夹，新建Home.vue, User.vue ~~~等页面

2. 新建src/router文件夹, 新建index.ts文件

```ts
import { createWebHistory, type RouteRecordRaw, createRouter } from 'vue-router';

const layout = () => import('@/layout/Layout.vue');
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: layout,
    children: [
      {
        path: '/home',
        component: () => import('@/views/Home.vue'),
      },
    ],
  },
  {
    path: '/',
    component: layout,
    children: [
      {
        path: '/message',
        component: () => import('@/views/Message.vue'),
      },
    ],
  },
  {
    path: '/',
    component: layout,
    children: [
      {
        path: '/cart',
        component: () => import('@/views//Cart.vue'),
      },
    ],
  },
  {
    path: '/',
    component: layout,
    children: [
      {
        path: '/user',
        component: () => import('@/views/User.vue'),
      },
    ],
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});
```

# 七、配置Layout

1. 新建src/layout/Layout.vue文件

```vue
<script setup lang="ts"></script>

<template>
  <main>
    <router-view></router-view>
  </main>
  <div class="bottom-nav">
    <router-link to="/home">主页</router-link>
    <router-link to="/message">消息</router-link>
    <router-link to="/cart">购物车</router-link>
    <router-link to="/user">用户</router-link>
  </div>
</template>

<style lang="scss" scoped>
main {
  height: calc(100vh - var(--bottom-nav-height));
  overflow: auto;
}
.bottom-nav {
  width: 375rem;
  height: var(--bottom-nav-height);
  background: #bfa;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  a {
    width: 25%;
  }
}
</style>
```

# 八、引入svg

## 1. 安装unplugin-svg-component插件

```sh
npm i unplugin-svg-component -D
```

## 2. vite配置

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import UnpluginSvgComponent from 'unplugin-svg-component/vite';

export default defineConfig({
  plugins: [
    UnpluginSvgComponent({
      iconDir: ['./src/assets/svg'],
      dts: true,
      dtsDir: './src/types',
      prefix: 'icon',
    }),
  ],
});
```

## 3. 将SvgIcon设置为全局组件

```ts
// main.ts
import SvgIcon from '~virtual/svg-component';

app.component(SvgIcon.name, SvgIcon);
```

## 4. 使用

备注：输入name的时候如果没有提示就重启vs code和重启ts服务器

```vue
<SvgIcon name="icon-home"></SvgIcon>
```

# 九、重构LayOut

## 1. 新建src/layout/BottomNav.vue文件，将Layout底部导航提取至BottomNav.vue

<!-- BottomNav.vue -->

```vue
<script setup lang="ts"></script>

<template>
  <div class="bottom-nav">
    <router-link to="/home">
      <SvgIcon name="icon-home"></SvgIcon>
    </router-link>
    <router-link to="/message">
      <SvgIcon name="icon-message"></SvgIcon>
    </router-link>
    <router-link to="/cart">
      <SvgIcon name="icon-cart"></SvgIcon>
    </router-link>
    <router-link to="/user">
      <SvgIcon name="icon-user"></SvgIcon>
    </router-link>
  </div>
</template>

<style lang="scss" scoped>
.bottom-nav {
  width: 375rem;
  height: var(--bottom-nav-height);
  position: fixed;
  bottom: 0;
  display: flex;
  border-top: 1px var(--border-color) solid;
  background-color: var(--secondary-color);

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    font-size: 26rem;
    color: var(--light-color);
  }
  .router-link-active {
    color: var(--primary-color);
  }
}
</style>
```

<!-- Layout.vue -->

```vue
<script setup lang="ts"></script>

<template>
  <router-view class="main"></router-view>
  <BottomNav></BottomNav>
</template>

<style lang="scss" scoped>
.main {
  height: calc(100vh - var(--bottom-nav-height));
  overflow: auto;
}
</style>
```

# 十、useFetch加载数据

## 1. 自定义useFetch

```ts
// useFetch.ts
export default <T>(url: Ref<string>) => {
  const data = ref<T | null>(null);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  watchEffect(() => {
    loading.value = true;
    fetch(import.meta.env.VITE_BASE_API + url.value)
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err))
      .finally(() => (loading.value = false));
  });

  return { data, loading, error };
};
```

```vue
<script setup lang="ts">
//创建一个页码
const pageNumber = ref(1);
const url = computed(() => `products?page=${pageNumber.value}`);
// 加载数据
const { data, isFinished } = useFetch<Page<Product>>(url);
</script>
```

## 2. VueUse的useFetch

```vue
<script setup lang="ts">
// 加载数据
const { data, isFinished } = useFetch(url, { refetch: true }).json<Page<Product>>();
</script>
```

## 3. createFetch（常用）

```ts
// useFetch.ts
export default createFetch({
  baseUrl: import.meta.env.VITE_BASE_API,
  options: {
    refetch: true,
  },
});
```

```vue
<script setup lang="ts">
//创建一个页码
const pageNumber = ref(1);
const url = computed(() => `products?page=${pageNumber.value}`);
// 加载数据
const { data, isFinished } = useFetch(url).json<Page<Product>>();
</script>
```

# 十一、滚动加载

## 1.自定义滚动加载

1. 获取滚动区域ref

```vue
<!-- Home.vue -->
<script setup lang="ts">
const scrollEle = ref(null);
provide(SCROLL_ELE, scrollEle);
</script>

<template>
  <div ref="scrollEle">
    <!-- 滚动区域 -->
  </div>
</template>
```

2. 在商品列表组件中通过依赖注入获取滚动区域的div元素，实现滚动加载

```vue
<!-- 商品列表组件 -->
<script setup lang="ts">
//创建一个ref数组
const products = ref<Product[]>([]);
//创建一个页码
const pageNumber = ref(1);
const url = computed(() => `products?page=${pageNumber.value}`);
// 加载数据
const { data, isFinished } = useFetch<Page<Product>>(url).json();
// 依赖注入获取滚动区域的div元素
// SCROLL_ELE为常量
const scrollEle = inject<Ref<HTMLDivElement>>(SCROLL_ELE);
const scrollHandler = () => {
  if (scrollEle) {
    if (scrollEle.value.scrollHeight - scrollEle.value.scrollTop === scrollEle.value.clientHeight) {
      if (data.value && pageNumber.value < data.value.totalPages) {
        pageNumber.value++;
      }
    }
  }
};
watchEffect(() => {
  if (data.value) {
    products.value.push(...data.value.data);
  }
});

//当窗口滚动到最后时，使页码自增，加载下一页
onMounted(() => {
  if (scrollEle) {
    scrollEle.value.addEventListener('scroll', scrollHandler);
  }
});
//加载完移除事件
onUnmounted(() => {
  if (scrollEle) {
    scrollEle.value.removeEventListener('scroll', scrollHandler);
  }
});
</script>
```

## 2.useInfiniteScroll

```vue
<script setup lang="ts">
//创建一个ref数组
const products = ref<Product[]>([]);
//创建一个页码
const pageNumber = ref(1);
const url = computed(() => `products?page=${pageNumber.value}`);
// 加载数据
const { data, isFinished } = useFetch<Page<Product>>(url).json();
// 通过依赖注入获取要滚动区域的div元素
const scrollEle = inject<Ref<HTMLDivElement>>(SCROLL_ELE);
useInfiniteScroll(
  scrollEle,
  () => {
    if (scrollEle) {
      if (data.value && pageNumber.value < data.value.totalPages) {
        pageNumber.value++;
      }
    }
  },
  { distance: 50, interval: 200 },
);

watchEffect(() => {
  if (data.value) {
    products.value.push(...data.value.data);
  }
});
</script>
```

# 十二、git的基本操作

```sh
git config --global user.email "xxx" #配置email
git config --global user.name "xxx" #配置name
git init #初始化项目
git status #查看文件状态
git add <file> #将文件暂存到缓冲区
git add ./-A #将全部文件暂存到缓冲区
git commit -m 'message' #提交暂缓去的更改到仓库
git push  #将新的更改提交到远程仓库

git log #查看提交日志
git branch #列出本地分支
git checkout <branch> #切换到指定分支
git pull #从远程仓库拉去最新的修改
git differ #查看工作区和暂存区的差异
git fetch #从远程仓库拉去所有分支的最新信息
git reset <file> #撤销对文件的暂存
git remote-v #查看远程仓库的详细信息
git re <file> #从版本库中删除文件
git tag <tag_name> #创建一个标签
git merge <branch> #合并指定分支到当前分支
git remote add <remote_name> <url> #添加一个远程仓库
```