mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
code update
This commit is contained in:
chuan_wuhao
parent
5d4add1e9d
commit
bca1676627
10
README.md
10
README.md
@ -1,6 +1,10 @@
|
||||
# Ray template
|
||||
|
||||
模板按照个人习惯进行原始框架、组件的引入与封装, 采用 `Vue 3` `TypeScript` `TSX` 进行开发, 但是如果使用 `@vueuse hook` 库，如果使用 `TSX` 开发会有一些 bug, 建议采用 `<script setup>` 形式开发
|
||||
`模板按照个人习惯进行搭建, 可以根据个人喜好进行更改`
|
||||
|
||||
## 项目说明
|
||||
|
||||
项目采用 `Vue 3` `TypeScript` `TSX` `Vite` 进行开发, 已经集成了一些常用的开发库, 进行了一些 `Vite` 相关配置, 例如全局自动引入、`GIZ` 打包、按需引入打包、[reactivityTransform](https://vuejs.org/guide/extras/reactivity-transform.html)等, 解放你的双手. 国际化插件, 按照项目需求自己取舍. 引入了比较火的 `hook` 库 [@vueuse](https://vueuse.org/), 极大提高你的搬砖效率. `小提醒: 为了避免使用 @vueuse 时出现奇奇怪怪的错误(例如: useDraggable 在使用的时候, TSX 形式开发会失效), 建议采用 <script setup /> 形式进行开发`.
|
||||
|
||||
## 启动项目
|
||||
|
||||
@ -10,8 +14,6 @@
|
||||
|
||||
`yarn build` / `npm run build`
|
||||
|
||||
## 项目说明
|
||||
|
||||
## 使用开源库
|
||||
|
||||
- [pinia](https://pinia.vuejs.org/) `全局状态管理器`
|
||||
@ -48,3 +50,5 @@
|
||||
|
||||
- vite-plugin: 插件注册
|
||||
```
|
||||
|
||||
### 祝大家搬砖愉快, 希望这个模板能帮你省很多时间
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
|
||||
import DraggableComponent from '@/components/DraggableComponent/index.vue'
|
||||
import RayIcon from '@/components/RayIcon/index'
|
||||
|
||||
const App = defineComponent({
|
||||
name: 'App',
|
||||
setup() {
|
||||
const draggableRef = ref<HTMLElement>()
|
||||
|
||||
const { x, y } = useMouse()
|
||||
const { height: windowHeight } = useWindowSize()
|
||||
|
||||
@ -20,8 +19,9 @@ const App = defineComponent({
|
||||
return (
|
||||
<div
|
||||
class="app-wrapper"
|
||||
style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192`}
|
||||
style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192;padding: 20px;`}
|
||||
>
|
||||
<RayIcon name="ray" size="24" />
|
||||
hello! Welcome to this template!
|
||||
<h1>
|
||||
当前鼠标位置: x: {this.x}, y: {this.y}
|
||||
|
||||
@ -2,12 +2,55 @@ import { defineComponent } from 'vue'
|
||||
|
||||
const RayIcon = defineComponent({
|
||||
name: 'RayIcon',
|
||||
props: {},
|
||||
setup() {
|
||||
return {}
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'icon',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 14,
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
},
|
||||
customClassName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const modelColor = computed(() => props.color)
|
||||
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
|
||||
|
||||
return {
|
||||
modelColor,
|
||||
symbolId,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return <div></div>
|
||||
return (
|
||||
<svg
|
||||
ariaHidden={true}
|
||||
class={`ray-icon ${this.customClassName}`}
|
||||
style={`width: ${this.width ? this.width : this.size}px;height: ${
|
||||
this.height ? this.height : this.size
|
||||
}px`}
|
||||
>
|
||||
<use xlink:href={this.symbolId} fill={this.modelColor} />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
14
src/icons/ray.svg
Normal file
14
src/icons/ray.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg t="1659811416176" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10290" width="64" height="64">
|
||||
<path d="M472.342857 968.685714c-73.828571 0-130.171429-12-172.114286-36.571428-38.742857-22.742857-84.914286-68.685714-84.914285-158.057143-2.971429-141.942857 109.714286-259.542857 251.657143-262.514286 141.942857-2.971429 259.542857 109.714286 262.514285 251.657143 0.114286 3.657143 0.114286 7.2 0 10.857143 0 89.371429-46.171429 135.2-84.914285 158.057143-41.942857 24.685714-98.285714 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10291"></path>
|
||||
<path d="M766.742857 968.685714c-73.942857 0-130.171429-12-172.228571-36.571428-38.742857-22.742857-84.914286-68.685714-84.914286-158.057143 2.857143-141.942857 120.228571-254.742857 262.285714-252 137.942857 2.742857 249.142857 113.942857 252 252 0 89.371429-46.171429 135.2-84.914285 158.057143-42.057143 24.685714-98.4 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10292"></path>
|
||||
<path d="M512 940.571429c-153.257143 0-268.457143-24-352.457143-73.257143-50.971429-29.942857-90.514286-69.714286-117.142857-118.057143C14.285714 698.285714 0 637.028571 0 567.085714c0.114286-282.857143 229.6-512 512.457143-511.885714 205.6 0.114286 391.2 123.2 471.314286 312.571429 26.742857 63.085714 40.342857 130.857143 40.228571 199.314285 0 69.828571-14.285714 131.2-42.4 182.171429-26.742857 48.342857-66.171429 88.114286-117.142857 118.057143C780.571429 916.685714 665.257143 940.571429 512 940.571429z" fill="#25467A" p-id="10293"></path>
|
||||
<path d="M48 567.085714c0-256.228571 207.771429-464 464-464s464 207.771429 464 464S768.228571 892.571429 512 892.571429 48 823.314286 48 567.085714z" fill="#FFF3E0" p-id="10294"></path>
|
||||
<path d="M472.342857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.457143-74.171429-72.457143-136.342857 0-127.885714 104-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571429 136.342857-38.057143 22.4-90.171429 33.142857-159.542857 33.142857z" fill="#25467A" p-id="10295"></path>
|
||||
<path d="M263.314286 774.057143c0-115.428571 93.485714-209.142857 209.028571-209.142857 115.428571 0 209.142857 93.485714 209.142857 209.028571v0.114286c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.028571-31.085714-209.028571-146.628571z" fill="#FFF3E0" p-id="10296"></path>
|
||||
<path d="M472.342857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.457143 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857s-59.428571-115.657143-132.8-115.657143z" fill="#388E3C" p-id="10297"></path>
|
||||
<path d="M766.742857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.571429-74.171429-72.571429-136.342857 0-127.885714 104.114286-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571428 136.342857-38.057143 22.4-90.171429 33.142857-159.428572 33.142857z" fill="#25467A" p-id="10298"></path>
|
||||
<path d="M557.6 774.057143c0-115.428571 93.6-209.142857 209.142857-209.142857s209.142857 93.6 209.142857 209.142857c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.142857-31.085714-209.142857-146.628571z" fill="#FFF3E0" p-id="10299"></path>
|
||||
<path d="M766.742857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.342857 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857S840 652.8 766.742857 652.8z" fill="#FBC02D" p-id="10300"></path>
|
||||
<path d="M401.6 486.857143c-38.171429 0-69.142857-30.971429-69.142857-69.257143 0-7.657143 6.171429-13.828571 13.828571-13.828571 7.314286 0 13.485714 5.714286 13.828572 13.028571v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285714s14.057143 5.828571 14.285714 13.371428v0.8c0.114286 38.4-30.857143 69.371429-69.142857 69.371429zM221.714286 306.971429c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428s41.828571-17.942857 42.171428-40.8v-1.371428c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171428 40.8v1.371429zM498.514286 306.971429c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171429 40.8-0.114286 0.457143-0.114286 0.914286-0.114285 1.371429z" fill="#25467A" p-id="10301"></path>
|
||||
<path d="M207.885714 376.228571h-55.314285c-15.314286-0.342857-27.885714 11.771429-28.228572 27.085715-0.342857 15.314286 11.771429 27.885714 27.085714 28.228571H208c15.314286 0.342857 27.885714-11.771429 28.228571-27.085714 0.342857-15.314286-11.771429-27.885714-27.085714-28.228572h-1.257143z m442.857143 0H595.428571c-15.314286 0-27.657143 12.342857-27.657142 27.657143s12.342857 27.657143 27.657142 27.657143h55.314286c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714 0.342857-15.314286-11.771429-27.885714-27.085715-28.228572h-1.142857z" fill="#F8BBD0" p-id="10302"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
@ -9,3 +9,9 @@ const routes = Object.keys(route).reduce((modules, modulePath) => {
|
||||
}, [] as RouteRecordRaw[])
|
||||
|
||||
export default routes
|
||||
|
||||
/**
|
||||
*
|
||||
* 这个方法可以自动载入路由表, 不需要手动进行导入
|
||||
* 单个路由表格式可以参考 test.ts
|
||||
*/
|
||||
|
||||
6
src/router/modules/test.ts
Normal file
6
src/router/modules/test.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
path: 'app',
|
||||
name: 'app',
|
||||
component: () => import('@/App'),
|
||||
children: [{}], // 如果有子路由, 直接接着写就好
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user