# springboot-everything-experience

**Repository Path**: xiohuchi/springboot-everything-experience

## Basic Information

- **Project Name**: springboot-everything-experience
- **Description**: 万物皆可vue
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-17
- **Last Updated**: 2022-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 启动
- yarn
- yarn dev

#工程目录
````
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── errorPages             # 错误页
│   ├── layout                 # 全局 layout
|   ├── request                # axios请求封装
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── types                  # 接口、页面ts类型约束
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   └── main.ts                # 入口文件 加载组件 初始化等
├── .env.xxx                   # 环境变量配置
├── index.html                 # html模板
├── tsconfig.json              # ts配置文件
├── vite.config.ts             # vite配置文件
└── package.json               # package.json
````

# 项目过程
###安装某个依赖，保存到 dependencies
- yarn add path
- yarn add ant-design-vue
- yarn add @ant-design/icons-vue --save
- yarn add vue-router
- yarn add vuex@next
- yarn add axios
- yarn add less --save

####安装Node.js 的类型定义
npm i --save-dev sass

####安装Node.js 的类型定义
npm i --save-dev @types/node

####安装@types/store 的类型定义
npm i --save-dev @types/store

####动态切换主题，我使用一个vite插件：vite-plugin-theme-preprocessor
```
yarn add @zougt/vite-plugin-theme-preprocessor -D
```
```
"ant-design-vue": "2.2.2",
"axios": "^0.21.1",
"clipboard": "^2.0.8",
"core-js": "^3.15.2",
"dayjs": "^1.10.6",
"js-cookie": "^3.0.0-rc.3",
"mockjs": "^1.1.0",
"remixicon": "^2.5.0",
"vue": "^3.1.4",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
```


#知识点
## node寻找方式
```
1 import router from './router'
2 //等效于
3 //import router from './router/index.ts'

这个不是vue的规定而是node加载模块的方式,当require('./router')(import会被转为require),node是这样的寻找目标的:
1.首先寻找目录下有没有router.js或者router.node,如果有就导入
2.如果没有看是否有router目录,如果没有就require失败,抛出异常"Cannot find module './router'"
3.如果有router目录会在其下寻找package.json文件,如果有则按照package的配置来导入
4.如果没有package.json,看是否有index.js或者index.node,如果有就导入没有就失败
```