vue3.0项目创建并集成vue-router、vuex

vue3.0项目创建

vue-cli

npm i -g @vue/cli@next

本地的vue-cli需要删除并重启电脑

新建项目会有vue3选项，如果需要其他配置，需要选择第三个选项手动选择。

vite

使用vite速度更快

$ npm init vite-app project-name
$ cd project-name
$ npm i
$ npm run dev

路由

• npm安装

npm i vue-router@next

• 创建路由文件

/* 从路由中导入createRouter createWebHashHistory创建路由对象 */
import { createRouter, createWebHashHistory } from "vue-router"
import layout from "../layout/layout.vue"
/* 创建路由对象 */
const router = createRouter({
    /* 路由模式 */
  history: createWebHashHistory(),
  routes: [
    /* { 
      path: '/', 
      component: () => import('@/components/HelloWorld.vue'),
      meta:{
        title:'首页',
        icon:''
      }
    }, */
  ]
})
/* 导出 */
export default router

• mian.js中引入路由文件并挂载到项目上

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

// 路由
import router from "./router"


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

• 获取路由器实例

// 引入路由器实例
import { useRouter, useRoute } from "vue-router"
// useRouter === this.$router  useRoute === this.$route 
const router = useRouter()
const route = useRoute()

vuex

• npm 安装

npm i vuex@next

• 初始化

import {createStore} from "vuex"

const store = createStore({
  state:{
    count:0
  },
  mutations:{
    addCount(state) {
      state.count++
    }
  }
})
export default store

• main.js引入并注册

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

// 路由
import router from "./router"

// 状态管理
import store from "./store"


createApp(App).use(router).use(store).mount('#app')

• 组件中使用

<template>
  <div @click="addCount">
    {{count}}
  </div>
</template>

<script setup>
import { reactive, computed } from "vue"
import {useStore} from "vuex"
const store = useStore

const state = reactive({
  count:computed(() => {
    return store.state.count
  })
})

const addCount = () => {
 store.commit('addCount')
}

</script>

<style lang="scss" scoped>

</style>