# rabbit-vue3-ts

**Repository Path**: wind-blows/rabbit-vue3-ts

## Basic Information

- **Project Name**: rabbit-vue3-ts
- **Description**: 电商发展十余年，是个成熟的模式，小兔鲜儿是 B2C 电商平台，综合品类平台，参考网易严选。平台理念：（品质）新鲜、（价格）亲民、（物流）快捷。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-24
- **Last Updated**: 2024-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

# You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

==================================================================================  
项目初始化做一个说明  
src/utils ✔ 专门存放一些工具方法工具函数的,发请求的封装本地存储的  
src/assets/images styles ✔ 用于存放图片字体图标样式  
src/router ✔ 用于存放路由相关  
src/store ✔ 用于存放数据相关  
src/views ✔ 用于存放路由级别的组件  
src/components ✔ 用于存放公用级别的组件  
src/types ✔ 用于存放 ts 的公共类型  
————————————————————————————————————————————————————————————————————————————————  
把项目管理起来  
初始化项目：git init  
将代码添加到暂存区： git add .  
提交代码 git commit -m '初始化提交'  
在码云上创建项目 rabbit-Vue3-ts，选择开源  
关联远端仓库  
git remote add origin https://gitee.com/ifercarly/rabbit-vue3-ts.git  
推送到远程仓库  
git push -u origin master  
————————————————————————————————————————————————————————————————————————————————  
创建实例 请求响应拦截 src/utils/request.ts  
测试接口 App.vue  
import request from './utils/request'  
request.get('/home/index').then(console.log)  
配置别名 vite.config.ts => npm i --save-dev @types/node  
路径提示 tsconfig.json  
————————————————————————————————————————————————————————————————————————————————  
使用 less 变量定义项目中常用的颜色,使用 mixins 定义项目中常用的样式  
安装 less 依赖包 yarn add less -D  
网站的颜色色调  
能够使用 normalize.css 统一项目中的样式各个浏览器  
————————————————————————————————————————————————————————————————————————————————  
将路由与项目文件做关联  
指定一级路由出口，App.vue  
通过调试工具显示组件名 yarn add vite-plugin-vue-setup-extend -D  
————————————————————————————————————————————————————————————————————————————————  
集成 Pinia 环境，统一管理项目中的数据  
npm i pinia  
定义后端返回数据的公共类型方面.出来