vue-router 4

1.installation

yarn add vue-router@4 -Snpm i vue-router@4 -S

2.src/router/index.js

// router/index.js文件import { createRouter, createWebHashHistory } from 'vue-router'// !!!注意：.vue不能省略，否则会报错，项目不能运行，如下错误/* index.js:3 GET http://localhost:3000/src/components/Home net::ERR_ABORTED 404 (Not Found)vue-router.js:3293 TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/components/Home
*/const Home = () => import('../components/Home.vue') //再次提醒：此处.vue不能省略const routes = [{path: '/',redirect: '/home'},{path: '/home',component: Home}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

3.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';   //引入createApp(App).use(router).mount('#app')   //挂载

4.App.vue

<template><!-- 添加router-view  --><router-view></router-view>
</template>

vuex 4

1.installation

yarn add vuex@next -Snpm i vuex@next -S

2.src/store/index.js

import { createStore } from 'vuex'
const store = createStore({state () {return {count: 0}},getters:{getCount(state){return state.count}},mutations: {increment (state) {state.count++}}
})export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import store from './store';createApp(App).use(router).use(store).mount('#app')

usage

<template><h1 @click="$store.commit('increment')">{{ $store.state.count }}</h1>
</template>

vite+vue3 整合vue-router4和vuex4相关推荐

vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
Vite+Vue3+TypeScript
2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...
Vite+Vue3+TypeScript基础知识案例
Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2.0已经很完善了,很多 ...
vue3日历时间 vite + vue3 日历时间
vite + vue3日历时间 #vue3 Calendar组件日历组件选择vite + vue3 https://v3.cn.vuejs.org/guide/introduction.html ...
yarn vite vue3.x
文章目录一.插件安装 1. vue-router 2. vuex 3. element-plus 4. axios 5. sass 二.Yarn 常用命令 2.1. 添加依赖包 2.2. 将依赖项添 ...
vite新建vue3项目采坑，官网流程之路，vite+vue3+elementpuls
Vite 构建可以使用 Vite 快速构建 Vue 项目. vue3文档操作步骤,按照文档操作,会有版本问题: vite构建后的vite版本是老版本: "vite": " ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
如何开发一款基于 Vite+Vue3 的在线Excel表格系统（上）
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...
基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦
???基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 - Soybean Admin开源啦??? 简介 Soybean Admin 是一个基于 Vue3.Vi ...

vite+vue3 整合vue-router4和vuex4

vue-router 4

1.installation

2.src/router/index.js

3.main.js

4.App.vue

vuex 4

1.installation

2.src/store/index.js

main.js

usage

vite+vue3 整合vue-router4和vuex4相关推荐

最新文章

热门文章