Vue进阶之Vue无代码可视化项目（三）
Vue无代码可视化项目
- 项目初始化
- store的使用
- DataSourceView.vue
- stores/counter.ts
- 开发模式按钮
- store/editor.ts
- LayoutView.vue
- 导航条
- 安装图标icon
- package.json
- store/debug.ts
- src/components/AppNavigator.vue
- AppNavigator.ts:
- AppNavigator.vue:
- theme样式
- theme/reset.css
- theme/variable.css
- theme/base.css
- theme/main.css
- main.ts
- App.vue
- router/index.ts
项目初始化
store的使用
DataSourceView.vue
<template><div class="about"><h1>DataSource {{ store.count }}-{{ store.double }}<button @click="store.increment">+</button><button @click="store.decrement">-</button></h1></div>
</template><script lang="ts" setup>
import {useCounterStore} from '@/stores/counter'// 丢掉响应式
// const {count,increment,double,decrement} = useCounterStore()
const store=useCounterStore()
</script><style>
@media (width >= 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count=ref(0)const double=computed(()=>count.value*2)const increment=()=>{count.value++}const decrement=()=>{count.value--}return{count,double,increment,decrement}
})
开发模式按钮
创建editor.ts文件
- store
- editor.ts
store/editor.ts
import { ref } from 'vue'
import { defineStore } from 'pinia'export const useEditorStore = defineStore('editor', () => {// 开发模式const debug=ref(false)const toggleDebug=()=>{debug.value=!debug.value}return{debug,toggleDebug}
})LayoutView.vue
<template><div class="about" :class="{debug:editorStore.debug}" @click="editorStore.toggleDebug()"><h1>Layout</h1></div>
</template><script lang="ts" setup>
import {useEditorStore} from '@/stores/editor'
const editorStore = useEditorStore()
</script>
<style>
@media (width >= 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}.debug {border: 2px dashed #afafaf;}
}
</style>
导航条
安装图标icon
icon-park github
icon-park官网
package.json
"dependencies": {..."@icon-park/vue-next":"1.4.2"