vue3.0中如何使用router路由、vuex、element-plus

前言

vue3 已经出来大半年了，之前一直没有项目可以实际上手使用，这次刚好有机会，并且 vue3 已经可以和 element-plus 配合起来稳定开发了！那么就来一起用用 vue3（这篇对比 vue2 主讲如何使用，之后再探究原理~），其实说 vue3 最好的教程就是vue3 官网，官网写的很好，都可以照着官网和现成的案例直接学习~

当然，在 vue3 中也可以书写 vue2 的语法，我不想写成完全的初级教程，所以会选择性的写我认为重要的，很基础的东西大家有需要可以评论留言~

正文

这里使用 vue3 + element-plus + router4 + vuex@next 完成案例并解析过程；

一、配置项目

1.1 创建项目

npm install -g @vue/cli
vue create hello-vue3
npm i
cd hello-vue3
npm run serve

项目框架：

-public - //打包后的资源文件
  index.html - //入口文件
  src -
  components - //组件（新增）
  assets - //静态文件
  -base.css -
  -router - //路由（新增）
  -store - //vuex（新增）
  -view - //vue文件书写
  -home.vue -
  app.vue -
  main.js -
  babel.config.js -
  package.lock.json -
  package.json -
  README.md -
  vue.config.js; //配置文件（新增）

1.2 导入 element-plus + router4 + vuex

npm i element-plus vue-router@4 vuex@next -s

版本：

"element-plus": "^1.0.2-beta.40",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"

1.3 main.js 中使用 element-plus、路由、vuex

import {
    createApp } from "vue";
import App from "./App.vue";
// 路由
import router from "./router";
// vuex
import store from "./store";

// 全局引入ElementPlus，当然也可以使用局部引入
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css"; //引入样式
import locale from "element-plus/lib/locale/lang/zh-cn"; //中文

createApp(App)
  .use(store)
  .use(ElementPlus, {
    size: "small", zIndex: 3000, locale })
  .use(router)
  .mount("#app");

tips

• 以上使用全局引入 ElementPlus，当然也可以对照-官网-使用局部引入方式;

二、路由使用

2.1 配置文件 - router.js

代码

import {
    createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
   
    path: "/",
    name: "home",
    component: () => import("@/view/home.vue"),
  },
  {
   
    path: "/vue2",
    name: "vue2",
    component: