创建步骤

##全局安装 vite npm install create-vite-app -g ###创建项目 yarn create vite ###输入项目名称, 待项目创建好后。然后进入项目目录执行yarn安装依赖 ###安装Prettier

yarn add prettier --dev
根目录创建.prettierrc文件
配置Prettier规则 ###集成eslint(检验代码格式的工具) yarn add eslint --dev ###安装less yarn add less@next --dev ###安装less-loader yarn add less-loader@next --dev ###安装axios, vue-router, pinia
yarn add axios@next
yarn add vue-router@next
yarn add pinia@last ###pinia 的使用 1 修改 main.ts 文件

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

2 在src目录下创建store文件夹, 添加 index.ts文件

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
    state: () => {
        return {
            count: 10,
            age: 0
        }
    },
    getters: {
      getAge (state) {
          return state.age
      },
      getAgeNumber():number{
          return this.age
      }
    },
    actions: {
        print () {
            console.log('age:' + this.age + ',count:' + this.count)
        },
        changeState(){
            this.count--
        }
    }
})

3 调用案列

import { useCounterStore } from '@/store'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// 通过pinia中提供的storeToRefs方法来同步使用数据
const { count } = storeToRefs(store)
// 定义好 count 之后 template 中可以直接使用
// 调用 store定义的getter
console.log(store.getAge)
console.log(store.getAgeNumber)
// 订阅值的修改
store.$subscribe((mutation, state) => {
// 每当它发生变化时，将整个状态持久化到本地存储
    console.log("age change:" + state.age)
})
const changCount = () => {
    // 直接修改count值
    // store.count++
    store.changeState() // 修改值
    // 通过$patch来修改
    store.$patch(store => {
        store.age++
    })
}
store.print() // 直接访问store中actions定义的方法
/**
*  其他方法
*  store.$reset() 重置state中的初始值
*  store.$patch(state) 对传入的state的值进行批量修改
*
*/

4 模块化

// 引入所有模块
import system from './module/system'//系统相关
import user from './module/user'//用户相关
// 整合模块,统一导出
export default function Store() {
    return {
        system: system(),
        user: user()
    }
}
// 调用
import Store from './store/index.js'
const vuex = Store()
console.log(vuex.system)
console.log(vuex.user)

###pinia 的持久化

安装
yarn add pinia-plugin-persistedstate@next

加载

      import { createPinia } from 'pinia'
      import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
      const pinia = createPinia()
      pinia.use(piniaPluginPersistedstate)
      export default pinia

使用

  import { defineStore } from 'pinia'
  import config from '@/config'
  const useCommonStore = defineStore('commons', {
    state: ()=> {
        return {
            baseName: '张三',
            age: 30
        }
    },
    /**
     * paths 指定存储值
     1 存储对象属性和对象
     state: () => ({
        save: {
          me: 'saved',
          notMe: 'not-saved',
        },
        saveMeToo: 'saved',
      }),
      persist: {
        paths: ['save.me', 'saveMeToo'],
      }
     */
    persist: {
        // 指定存储的key名称
        key: config.applicationName + '-store-commons',
        // 设置存储方式, localStorage和sessionStorage可设置
        //storage: sessionStorage,
        storage: {
            // 自定义存取
            getItem (key: string): string | null {
                return ''
            },
            setItem(key: string, value: string) {
                console.log(value)
            }
        },
        // 指定存储值
        paths: ['age', 'save'],
        beforeRestore: (ctx) => {
            // 存储之前
            console.log(`beforeRestore '${ctx.store.$id}'`)
        },
        afterRestore: (ctx) => {
            // 存储之后
            console.log(`afterRestore '${ctx.store.$id}'`)
        }
    }
})
export default useCommonStore

###安装native-ui 1 yarn add naive-ui@next 2 在src目录下创建一个plugins文件夹, 并创建naive-ui-component.ts文件 #vue3 ##参考的vue3公共代码 ###vuex 的引用

import { useStore } from 'vuex'
const store = useStore()
console.log("getters: " + store.getters.layoutContentHeight)

###访问全局this

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.$config.production)

###vue3 生命周期

onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。
onMounted – 组件挂载时调用
onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onActivated – 被 keep-alive 缓存的组件激活时调用。
onDeactivated – 被 keep-alive 缓存的组件停用时调用。
onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

计算属性传递参数

  import { computed } from 'vue';
  const currentId = ref(null);
  const isShow=computed(()=>(item:any) => {
    return currentId === item.id
  })

父子组件见的调用

1 子组件设置props和emit内容

  // setup 语法糖中的写法
  const props = defineProps({
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 33
    }
  })
  //可以直接用pops.来调用, 也可把属性导出
  const { name, age } = props
  const emit = defineEmits(['change'])
  const buttonClick = () => {
    console.log(name + ' - click -' + age)
    emit('change', 'fuck')
  }

2 子组件暴露方法或属性到供父组件refs访问

子组件暴露属性和方法

      // setup 语法糖中的写法
      const maybeCall = () => {
          console.log('maybeCall')
      }
      const func1 = () => {
          console.log('func1')
      }
      const attr = ref('niubi')
      // 暴露方法或者属性
      defineExpose({
          maybeCall, func1, attr
      })

父组件调用

  /**
  定义子组件的引用
  
    
  
  import IconView from '@/layouts/icon-view.vue'
  const iconView = ref>()
  */
  /**
    在setup中不能直接ref到helloWorld, 需要在nextTick中使用
    import { nextTick } from 'vue'
  */
  const helloWorld = ref(null);
  /*
    nextTick(()=>{
      // 此处可以访问 helloWorld
      console.log(helloWorld.value.attr)
    })
  */
  const buttonClick = (args) =>{
      console.log(args)
      console.log(helloWorld.value)
      helloWorld.value.maybeCall()
      helloWorld.value.func1()
      console.log(helloWorld.value.attr)
      // proxy.$refs.helloWorld.maybeCall()
  }

###naive ui 主颜色修改

需要为 NConfigProvider 设置 theme-overrides 属性
theme-overrides 值的获取方式如下

  
  const getThemeOverrides = computed(() => {
    return {
      common: {
        primaryColor: '#f60',
        primaryColorHover: '#f67',
        primaryColorPressed: '#f67',
      },
      LoadingBar: {
        colorLoading: '#f67',
      }
    }  
  })

查询可以设置的值的方法

  import { useThemeVars } from 'naive-ui'
  const themeVars = useThemeVars()
  console.log(themeVars.value)

安装图标库

yarn add @vicons/antd@next
yarn add @vicons/carbon@next
yarn add @vicons/fa@next
yarn add @vicons/fluent@next
yarn add @vicons/ionicons5@next
yarn add @vicons/material@next
yarn add @vicons/tabler@next

vue3 路由

import { useRouter, useRoute } from 'vue-router' useRoute 为当前路由 useRouter 为当前可以使用的路由方法 console.log(useRouter()) console.log(useRoute().path)

路由的watch

  import { useRouter } from 'vue-router'
  const router = useRouter()
  watch(() => router.currentRoute.value.path,(toPath) => {
        //要执行的方法
     },{immediate: true,deep: true})

###使用vue transition 实现路由动画

#npm 镜像切换

npm get registry 查看镜像
npm config set registry https://registry.npm.taobao.org 淘宝镜像
npm config set registry https://registry.npmjs.org 官方镜像

vue-design-view

创建步骤

计算属性传递参数

父子组件见的调用

安装图标库

vue3 路由

路由的watch

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

vue-design-view

创建步骤

计算属性传递参数

父子组件见的调用

安装图标库

vue3 路由

路由的watch

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads