Vue进阶之Vue无代码可视化项目（三）

VillanelleS

已于 2024-06-03 23:15:17 修改

阅读量1.1k

点赞数 25

分类专栏： Vue3基础前端 TypeScript 文章标签： vue.js javascript ecmascript

于 2024-06-02 16:41:04 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/139380501

版权

这篇博客详细介绍了如何进行Vue项目的初始化，包括store的使用，如在DataSourceView.vue和counter.ts中设置数据源，以及开发模式下编辑器按钮的实现。在导航条部分，博主分享了安装图标icon的过程，更新了package.json，并在debug.ts中进行状态管理。此外，还讨论了主题样式的创建，如reset.css、variable.css、base.css和main.css，以及主要组件如AppNavigator.vue的开发。

摘要由CSDN通过智能技术生成

项目初始化

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"
  },

pnpm i

store/debug.ts

创建debug.ts文件

store
- debug.ts

import {
    ref } from 'vue'
import {
    defineStore } from 'pinia'

export const useEditorStore = defineStore('debug', () => {
   
  //  开发模式
  const debug=ref(false)

  const toggleDebug