vite创建vue3项目

项目搭建

npm init vite-app xxxx    yarn create vite-app xxxx
cd xxxx       cd xxxx
npm install         yarn
npm run dev     yarn dev

安装路由

// npm/yarn
npm install vue-router@next     yarn add vue-router@next

// 创建文件 src/route/index.js
import {createRouter, createWebHistory} from 'vue-router'
export const router = createRouter({
  history: createWebHistory(),
  routes:[]
})

// 挂载vue上  /main.js
import {createApp} from 'vue'
import {router} from './router/index.js'
import app from './App.vue';
createApp(app).use(router).mount('#app')

// 在项目中使用
import {useRoute,useRouter} from 'vue-router'
setup(){
  const router = useRouter()
  const route = useRoute()
  router.push('/home')   
  route   //当前路由
  console.log(router)
  console.log(route)
}

安装vuex

// npm/yarn
npm install vuex@next     yarn add vuex@next

//创建文件 src/store/index.js
import {createStore} from 'vuex'
export const store = createStore({
  state:{},
  getters:{},
  mutations:{},
  actions:{}
})

// 挂载到vue上 main.js
import {createApp} from 'vue'
import store from './store/index.js'
import router from './route/index.js'
import app from './App.vue'
createApp(app).use(store).use(router).mount('#app')

// 使用vuex
import {useStore} from 'vuex'
setup(){
  const store = useStore()
  console.log(store.state)
  console.log(store.getters)
  store.commit()
  store.dispatch()
}