106 lines
3.2 KiB
Markdown
106 lines
3.2 KiB
Markdown
# Vue3 + Vite4 + Element + Windicss + Bootstrap
|
||
|
||
## 文件夹介绍
|
||
### 🅰️api
|
||
request.ts文件为axios封装，可在此拦截操作请求和回复
|
||
### 🆒components
|
||
组件文件夹，存放公共组件，如SvgIcon图标组件、Table表格组件等
|
||
### 👀hooks
|
||
封装hooks函数，公共函数的提取
|
||
### 🪪icons
|
||
存放图标组件，图标组件使用vite插件vite-plugin-svg-icon引入
|
||
```ts
|
||
plugins[
|
||
...
|
||
createSvgIconsPlugin({
|
||
// 指定需要缓存的图标文件夹
|
||
iconDirs: [path.resolve(process.cwd(), "src/icons")],
|
||
// 指定symbolId格式
|
||
symbolId: "icon-[dir]-[name]",
|
||
}),
|
||
...
|
||
]
|
||
```
|
||
使用时在组件内按如下方法使用即可
|
||
```ts
|
||
<svg-icon :name="'menu'" class="svgMenu cursor-pointer"></svg-icon>
|
||
```
|
||
### 🏬layout
|
||
整体的的布局组件，在router文件中根路径下引入。
|
||
包含Header、Main、Footer组件，布局使用了bootstrap的响应式布局
|
||
如菜单列表的写法
|
||
```ts
|
||
<nav class="navbar navbar-expand-lg">
|
||
<div class="container-fluid">
|
||
<button
|
||
class="navbar-toggler"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#navbarSupportedContent"
|
||
aria-controls="navbarSupportedContent"
|
||
aria-expanded="false"
|
||
aria-label="Toggle navigation"
|
||
>
|
||
<!-- <span class="navbar-toggler-icon"></span> -->
|
||
<svg-icon :name="'open'"></svg-icon>
|
||
</button>
|
||
<div
|
||
class="nav-list collapse navbar-collapse"
|
||
id="navbarSupportedContent"
|
||
>
|
||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||
<li
|
||
class="nav-item"
|
||
v-for="item in navList.data"
|
||
:key="item.id"
|
||
@click="skip(item.url)"
|
||
>
|
||
<a class="nav-link active" aria-current="page" href="#">{{
|
||
item.name
|
||
}}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
```
|
||
使用媒体查询监听屏幕宽度自适应调整布局
|
||
如Header组件中，屏幕宽度大于1200px时始终保持headeer栏宽度为200px
|
||
```css
|
||
// @/layout/components/Header.vue
|
||
@media screen and (min-width: 1200px) {
|
||
.header-container {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
其中Main组件中写入
|
||
```ts
|
||
<router-view class="main-container-content"></router-view>
|
||
```
|
||
### 🏳️⚧️router
|
||
路由管理，使用history模式
|
||
### 🛒store
|
||
状态管理，使用pinia
|
||
### 🍟style
|
||
存放样式文件，模板里主要存放的是主题文件，使用scss。
|
||
文件中的函数以及样式在main.ts中引入过后即可使用
|
||
### 🥅types
|
||
定义的类型和接口
|
||
### 🎊views
|
||
界面组件
|
||
### 🙈App.vue
|
||
界面入口
|
||
### 🧵Main.ts
|
||
项目入口文件
|
||
### 🗽env文件
|
||
根据不同环境配置的路径地址，常量名称必须是`VITE_***`格式，在vite项目中引入时的方式为`import.meta.env.VITE_***`。
|
||
还需要在`vite.config.ts`文件中设置才可引用，具体见文件
|
||
### 🪔vite.config.ts
|
||
配置了icons的引入、elemnet的按需引入和自动注册、element图标的使用、windicss的引入、符号别名的设置、server的设置。
|
||
|
||
### 📦在.env文件中修改链接
|