一.创建目录

1.使用 yarn 建立文件
yarn create @vitejs/app

2.使用 npm 建立文件
npm init @vitejs/app

选中vue

选中vue

选中之后回车创建项目

安装node_modules

yarn

二.vue3模板

<template>
  <div>
  </div>
</template>

<script setup>
  
</script>

<style lang="less" scoped>

</style>

模拟操作

<template>
  <div class="login">
    {{count}}
    {{state.count}}
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const count = ref(13)
const state = reactive({ count: 0 })

</script>

<style lang="scss" scoped>

</style>

三.路由配置

import { createRouter, createWebHashHistory } from 'vue-router';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue')
  }
]


const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router;

四.VUEX配置

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state() {
    return {
      userInfo: { name: 'tanwei', age: 18 }
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    changeUserInfo(state, val) {
      console.log(state, 111);
      state.userInfo = val
    }
  },
  actions: {
    changeUserInfoAction({ commit }, val) {
      commit('changeUserInfo', val)
    }
  }
})

export default store;