创建vue3+vite项目

vite官网
创建方法官网写的很清楚：新建vue3

啥都不如api好使啊，真理！

一：vue-router

安装4.0版本 4.x版本api

npm install vue-router@4

新建router/index.js

import { createRouter,createWebHistory } from "vue-router";

let router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('@/views/Index.vue')
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('@/views/Home.vue')
        },
    ]
})

export default router;

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)
app.use(router)
app.mount('#app')

app.vue

<template>
<router-view />
</template>

需要注意的是直接写文件路径'@/views/Home.vue'页面是会报错的，需要配置vite.config.js文件如下才能使用@，并且Home.vue要写全.vue不能省略：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
})

页面跳转

<template>
    <div>
        index..
        <div @click="onClick">点击跳转到home页面</div>
        <router-link to="/home">点击跳转到home页面</router-link>
    </div>
</template>
<script setup>
import  { useRouter } from 'vue-router'
const router = useRouter()
const onClick = () => {
    router.push('/home')
}
</script>

二：vuex

安装：

npm i --save vuex@4.0.0

新建store/index.js：

import { createStore } from "vuex";
const state = {
    num:990
}

const actions = {
    add({commit},info){
        commit('ADD')
    },
    reduce({commit},info){
        commit('REDUCE')
    }
}

const mutations = {
    ADD(state){
        state.num = state.num + 1
    },
    REDUCE(state){
        state.num = state.num - 1
    }
}

 
export default createStore({
    state,
    mutations,
    actions
});

main.js引入:

import { createApp } from 'vue'
import App from './App.vue'

import store from './store';
const app = createApp(App)
app.use(store)
app.mount('#app')

页面使用:

<template>
    <div>
        <h5>num:{{num}}</h5>
        <div @click="addNum">点击num+1</div>
        <div @click="reduceNum">点击num-1</div>
    </div>
</template>
<script setup>
import { ref,computed } from '@vue/reactivity'
import { useStore } from 'vuex'
const store =  useStore ()

const num = computed (()=>{
    return store.state.num
})
const addNum = () => {
    store.dispatch('add')
}
const reduceNum = () => {
    store.dispatch('reduce')
}
</script>

三：父子组件传值

父组件：

<template>

  <HelloWorld msg="Vue3+Vite" message='messae' 
              @changeNum2='changeNum2' @changeNum='changeNum' />

</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
const changeNum = (val) =>{
  console.log(val,'父组件获取num')
}
const changeNum2 = (val) =>{
  console.log(val,'父组件获取num')
}
</script>

子组件：

<template>
  <h1>{{ msg }}</h1>
  <h1>{{ message }}</h1>
  <div>num:{{num}} /  num2:{{num2}}</div>
  <div @click="onClick">点击父组件获取num</div>
  <div @click="onClick2">点击父组件获取num2</div>
</template>

<script setup>
import { defineProps,defineEmit,ref } from 'vue'
const num = ref(100);
const num2 = ref(1);
/* 传值 */
defineProps({
  msg: String,
  message: String
})
/* 声明事件 */
const emit = defineEmit(['changeNum','changeNum2'])

const onClick = () => {
  emit('changeNum',num.value)
}
const onClick2 = () => {
  emit('changeNum2',num2.value)
}
</script>