# rabbit

**Repository Path**: shuleijia/rabbit

## Basic Information

- **Project Name**: rabbit
- **Description**: 小兔鲜儿-vue3项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-01-09
- **Last Updated**: 2024-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3_ts

#### 介绍
vue3小兔鲜儿项目开发

#### 软件架构
软件架构说明


#### 初始化项目

1.  vue create rabbit
2.  选择第三个(Manually select features)
3.  选择 Balel  router vuex css Pre-pocessors linter/Dormatter
4.  选择3.x
5.  n
6.  选择less
7.  选择 ESLint + Standard config
8.  选择 Lint on save 和 Lint and fix on commit
9.  选择 In dedicated config files
10. n
11. 注意，这个初始化是配合小兔鲜儿的项目来的，自己项目可以自行配置

#### 启动命令

1.  npm run serve

#### 安装依赖

1.  npm install axios
2.  vue add style-resources-loader (less变量导入处理) 选择 less
![输入图片说明](https://gitee.com/shuleijia/rabbit/raw/master/src/assets/img/1.jpg)
3.  npm add normalize.css (重置样式)
4.  npm i @vueuse/core 使用vueuse 官网 [https://vueuse.org/core/useWindowScroll/](https://vueuse.org/core/useWindowScroll/)
5.  表单校验依赖 npm install vee-validate@4.0.3
使用
![输入图片说明](https://gitee.com/shuleijia/rabbit/raw/master/src/assets/img/4.jpg)
6.  vuex数据持久化  npm install vuex-persistedstate

#### 提交截图

1.  首页公共顶部样式
![输入图片说明](https://gitee.com/shuleijia/rabbit/raw/master/src/assets/img/2.png)
2.  首页左侧导航样式
![输入图片说明](https://gitee.com/shuleijia/rabbit/raw/master/src/assets/img/3.jpg)
3.  登录页面样式
![输入图片说明](https://gitee.com/shuleijia/rabbit/raw/master/src/assets/img/login.jpg)