Vue全家桶(vue2和vue3)

最新推荐文章于 2024-03-03 17:51:01 发布

原创最新推荐文章于 2024-03-03 17:51:01 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了Vue全家桶的使用，包括Vue2和Vue3下的router配置。在Vue2中，router的导入和配置在main.js中进行；在Vue3中，同样在main.js导入并应用。此外，文章还详细讲解了Vue2和Vue3中Vuex的状态管理，强调在Vue2中state的变更需通过mutations的commit，而在Vue3的main.js中进行了Vuex的设置，并在具体页面使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue全家桶(vue2和vue3)

1. vue的router使用

1.1vue2下的router使用

//首先引入库
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//将各个路由页面组装到数组routes里面
const routes = [];
//创建一个路由实例对象
const router = new VueRouter({
  routes
})
//导出这个路由
export default router

然后在main.js 导入

import router from './router';
//在挂在vue上即可
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.2 vue3的路由使用

//导入创建相关路由的函数
import { createRouter, createWebHashHistory } from 'vue-router';
//将各个路由页面组装到数组routes里面
const routers = [];
//然后用createRouter这个函数去创建路由
const router = createRouter({
	//用createWebHashHistory 这个函数去指定路由模式
    history: createWebHashHistory(),
    routes: routers
})
export default router;

然后在main.js中导入使用

import router from './router';
createApp(App).use(router).mount('#app')

Vue vuex知识点

vue2中使用vuex

//1. 引入vuex插件并使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
})

// 2. 在main.js引入 store
import store from './store';
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

注意点是state只能通过mutations去变更，然后定义在mutations里面的函数使用commit去承若，在actions里面的函数是通过dispatch来派发

vue3 vuex的使用

import { createStore } from 'vuex'
const state = {
    count: 0
}
const mutations = {
    increment(state) {
        state.count++
    }
}

const actions = {

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

在main.js中

...
import store from './store';
const admin = const admin = createApp(Admin);
admin.use(store);

具体页面使用

...
import {
    reactive,
    computed
} from 'vue';
import {
    useStore
} from 'vuex';
export default {
    setup() {
        const store = useStore();
        const addCount = () => {
            store.commit('increment')
        };
        return reactive({
            count: computed(() => store.state.count),
            addCount
        })
    }
}