# vite+vue3.2+tailwincss+navie

**Repository Path**: let_alone_the_wind/vite-vue32-tailwincss-navie

## Basic Information

- **Project Name**: vite+vue3.2+tailwincss+navie
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-19
- **Last Updated**: 2021-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目标准模板
本项目模仿vite社区的模板搭建，模板拉取的时候出了点问题，所以自己制作了这个模板

[社区模板地址](https://github.com/web2033/vite-vue3-tailwind-starter)
### 1.项目模块列表
#### 运行依赖
1. "vue": "^3.2.6",            
2. "vue-router": "^4.0.10",
3. "vue3-click-away": "^1.2.1",    // 点击外面自动关闭的模块，懒得自己写
4. "vuex": "^4.0.2",
5. "vuex-persist": "^3.1.3"        // 将vuex数据保存到浏览器，防止刷新丢数据

#### 开发依赖
6. "@tailwindcss/aspect-ratio": "^0.2.1",  // 不知道
7. "@tailwindcss/forms": "^0.3.3",     // tailwindcss表单，不好用，高度固定死了
8. "@tailwindcss/line-clamp": "^0.2.1",    // 最多显示多少行
9. "@tailwindcss/typography": "^0.4.1",    // 文字

10. "@types/tailwindcss": "^2.2.1",
11. "@vicons/antd": "^0.11.0",          // navie-ui推荐的图标库分库1
12. "@vicons/carbon": "^0.11.0",        // navie-ui推荐的图标库分库1
13. "@vicons/fa": "^0.11.0",            // navie-ui推荐的图标库分库1
14. "@vicons/fluent": "^0.11.0",        // navie-ui推荐的图标库分库1
15. "@vicons/ionicons4": "^0.11.0",     // navie-ui推荐的图标库分库1
16. "@vicons/ionicons5": "^0.11.0",     // navie-ui推荐的图标库分库1
17. "@vicons/material": "^0.11.0",      // navie-ui推荐的图标库分库1
18. "@vicons/tabler": "^0.11.0",        // navie-ui推荐的图标库分库1
19. "@vicons/utils": "^0.1.4",          // navie-ui推荐的图标库用来修改图标颜色和大小的
20. "@vitejs/plugin-vue": "^1.6.1",
21. "@vue/compiler-sfc": "^3.2.6",
22. "autoprefixer": "^10.3.4",          // tailwindcss需要的
23. "naive-ui": "^2.18.2",
24. "tailwindcss": "^2.2.15",           // tailwindcss主体
25. "vfonts": "^0.1.0",                 // navie-ui的字体，没用，
26. "vite": "^2.5.4"


### 2.自动导入
- 在main.js里面自动导入components里面的公共组件
- 在router.js里面自动导入views里面的路由组件
- 在store.js里面自动导入model里面的vuex模块


### 3.容器配置
- 配置nginx.conf文件方便启动nginx， 
- 配置dockerfile文件方便配置容器，
- 配置docker-compose.yml文件方便使用docker-compose来快速启动docker容器

### 前后端交互
- 封装的请求方法在request/index.js里面
- 接口路径存放到request/api.js里面，是个简单的对象
- 每个接口对应5中请求方法，写到request/request.js里面，也是个简单对象

## 注意
> tailwindcss初始化的时候，使用--full命令，这样tailwind.config.js文件内的配置是全部配置，方便后期修改

> vite配置里面手动添加别名