Vue3 集成Element3、Vue-router、Vuex实战

ゞ浴缸里的玫瑰 2023-10-10 16:57 15阅读 0赞

## 第一步：使用Vite快速搭建Vue 3项目 ##

基础操作总结：

npm init vite-app 项目名称
     
    cd 项目名称
     
    npm install
     
    npm run dev

温馨提示：如果还是Vue 2 环境请参考：[Vue 2 升级Vue3 ，并且使用vsCode 搭建Vue3 开发环境][Vue 2 _Vue3 _vsCode _Vue3]

Vue 3 项目本地访问：[http://localhost:3000/][http_localhost_3000]![6893eb56dbf1456ba5d35b83fae4eb4a.png][]

## 第二步：Vue 3 项目集成Element3 ##

首先要先安装element3.0插件，请先执行如下指令：

> npm i element3 -S

在main.js中引入element3 ，并注册element3。

import { createApp } from 'vue'
    import App from './App.vue'
    import Element3 from 'element3'
    import './index.css'
    import '../node_modules/element3/lib/theme-chalk/index.css';
    import router from './route'
    import store from './store';
    
    createApp(App).use(Element3, { size: 'small', zIndex: 3000 }).use(router).use(store).mount('#app')

核心片段截图：

![8a5759e9a8bb4a8fa483b035922e6981.png][]

在App.vue 引入Elements 3 按钮 。

<template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <HelloWorld msg="Hello Vue 3.0 + Vite" />
    
      <div :id="dynamicId">
         <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
       
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      data() {
        return {
          dynamicId: "123"
        }
      }
    }
    </script>

效果截图：

![308deedba5b2405fb424a448de389824.png][]

Element 3官网地址: [Elements 3 官网][Elements 3]

## 第三步: Vue 3 项目集成Vue-router ##

首先要先安装vue-router插件，请先执行如下指令：

> npm install vue-router@4 -S

在src下创建route文件夹和下面的index.js

![9993b52172cb41a08419b8e5dfe8f8f8.png][]

打开index.js 引入router

import { createRouter, createWebHistory } from 'vue-router'

声明历史模式

const routerHistory = createWebHistory()

在src/components文件夹下创建两个页面(Home.vue/Login.vue)

![172e509379854f79a9c66d5ea3b85c5a.png][]

在route/index.js 注册相关页面

const router = createRouter({
        history: routerHistory,
        routes: [
            {
                path: '/',
                component: () => import('../components/HelloWorld.vue')
            }, {
                path: '/home',
                component: () => import('../components/Home.vue')
            }, {
                path: '/login',
                component: () => import('../components/Login.vue')
            }
        ]
    })

然后导出router

export default router

在main.js 引入router

核心片段截图：![4e40d23599ee471d80df579f99e1b939.png][]

相关截图:

![0cbf4f8db48d4250a38c0962ccd423d5.png][]

![7bd7425b3ba947f9a3e27410d70af9ea.png][]

Home.vue

<template>
      <p>Login</p>
      <button @click="toHome">toHome</button>
    </template>
    <script>
    import { useRouter } from 'vue-router'
    export default {
      setup () {
        const router = useRouter()
        const toHome = (() => {
          router.push({
            name: 'home'
          })
        })
        return {
          toHome
        }
      },
    }
    </script>
    <style>
    </style>

HelloWorld.vue

<template>
      <h1>{
       { msg }}</h1>
      <button @click="count++">count is: {
       { count }}</button>
      <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    
      
    		<router-link to="/" active-class="current" replace>首页</router-link> |
    		<router-link to="/home" active-class="current" replace>Home</router-link> |
    		<router-link to="/login">登入</router-link>
    		
    		<router-view />
    
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data() {
        return {
          count: 0
        }
      },
        // `mounted` 是生命周期钩子，之后我们会讲到
      mounted() {
        // `this` 指向当前组件实例
        console.log(this.count) // => 1
    
        // 数据属性也可以被更改
        this.count = 2
      
      }
    }
    </script>

## 第四步: Vue 3 集成Vuex ##

首先要先安装vuex插件，请先执行如下指令：

npm install vuex@next --save

在 src 目录下创建 store/index.js store 仓库

import { createStore } from "vuex";
    
    const store = createStore({
    
    })
    
    export default store

在 main.js 文件中，有以下两个步骤：

import { createApp } from 'vue'
    import App from './App.vue'
    import Element3 from 'element3'
    import './index.css'
    import '../node_modules/element3/lib/theme-chalk/index.css';
    import router from './route'
    // 1. 导入store
    import store from './store';
    // 2. 挂载到Vue 根实例
    createApp(App).use(Element3, { size: 'small', zIndex: 3000 }).use(router).use(store).mount('#app')

### state 使用注意事项 ###

全局共享的数据，只允许在 **`mutation`**中修改

*  **`state`**提供唯一的公共数据源，所有共享的数据都要统一放到 **`Store`**的 **`state`**中进行存储
 *  **`state`**必须写成函数的形式并在 **`return`**的对象中存放数据

store/index.js

import { createStore } from 'vuex'
    
    // 创建一个新的 store 实例
    const store = createStore({
        state () {
          return {
            count: 0
          }
        }
      })
    
      export default store

#### 在组件中的 template 和 script 中使用 state ####

*  在 setup 中，必须通过实例 `useStore()` 才能拿到 `store` 中的数据
 *  通过 `compute` 获取 `store` 数据

App.Vue

<template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <HelloWorld msg="Hello Vue 3.0 + Vite" />
    
      
      <h2>{
       { $store.state.count }}</h2>
      <h2>{
       { ucount }}</h2>
    
      <div :id="dynamicId">
         <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
       
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      data() {
        return {
          dynamicId: "123"
        }
      },
       setup() {
        // 实例 useStore()，获取 store 对象
        const store = useStore()
        // // 通过 compute 获取 store 数据
        const ucount = computed(() => store.state.count);
    
        return {
          ucount,
        }
      }
    }
    </script>

效果截图：

![6579981b93154d1c916f6f81c3cd8e06.png][]

### mutations 使用 ###

一条重要的原则就是要记住 mutation 必须是同步函数

1.  Mutation 用于变更 Store中 的数据。
2.  只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
3.  通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

**参数**

*  参数一：state，可以获取state中的数据
 *  参数二：载荷，即额外的参数
 *  在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

store/index.js

import { createStore } from 'vuex'
    
    // 创建一个新的 store 实例
    const store = createStore({
        state () {
          return {
            count: 10
          }
        },
      // 参数一：state，可以获取state中的数据
      // 参数二：载荷，即额外的参数
      // 在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
      mutations: {
        increment(state, payload) {
          state.count += payload.num
        }
      }
      })
    
      export default store

#### 在组件中的 template 和 script 中提交 mutations ####

修改Home.Vue

<template>
      <p>Home</p>
       <div>
        <hr>
          <button @click="$store.commit('increment')">+1</button>
          <button @click="addTen">+10</button>
        <hr>
      </div>
    </template>
    <script>
    export default {
      methods: {
        addTen() {
          // 普通的写法
          // this.$store.commit('increment', {num: 10})
          
          // 另外一种提交风格
          this.$store.commit({
            type: 'increment',
            num: 10, 
          })
        }
      }
    }
    </script>
    <style>
    </style>

效果截图：

![47fc06c3f1df443f80963dd42d4c3f37.png][]

![ded108b7106f4f7d8ae886bef4e598b1.png][]

[Vue 2 _Vue3 _vsCode _Vue3]: https://blog.csdn.net/zhouzhiwengang/article/details/129879138?spm=1001.2014.3001.5501
[http_localhost_3000]: http://localhost:3000/
[6893eb56dbf1456ba5d35b83fae4eb4a.png]: https://img-blog.csdnimg.cn/6893eb56dbf1456ba5d35b83fae4eb4a.png
[8a5759e9a8bb4a8fa483b035922e6981.png]: https://img-blog.csdnimg.cn/8a5759e9a8bb4a8fa483b035922e6981.png
[308deedba5b2405fb424a448de389824.png]: https://img-blog.csdnimg.cn/308deedba5b2405fb424a448de389824.png
[Elements 3]: https://github.com/hug-sun/element3
[9993b52172cb41a08419b8e5dfe8f8f8.png]: https://img-blog.csdnimg.cn/9993b52172cb41a08419b8e5dfe8f8f8.png
[172e509379854f79a9c66d5ea3b85c5a.png]: https://img-blog.csdnimg.cn/172e509379854f79a9c66d5ea3b85c5a.png
[4e40d23599ee471d80df579f99e1b939.png]: https://img-blog.csdnimg.cn/4e40d23599ee471d80df579f99e1b939.png
[0cbf4f8db48d4250a38c0962ccd423d5.png]: https://img-blog.csdnimg.cn/0cbf4f8db48d4250a38c0962ccd423d5.png
[7bd7425b3ba947f9a3e27410d70af9ea.png]: https://img-blog.csdnimg.cn/7bd7425b3ba947f9a3e27410d70af9ea.png
[6579981b93154d1c916f6f81c3cd8e06.png]: https://img-blog.csdnimg.cn/6579981b93154d1c916f6f81c3cd8e06.png
[47fc06c3f1df443f80963dd42d4c3f37.png]: https://img-blog.csdnimg.cn/47fc06c3f1df443f80963dd42d4c3f37.png
[ded108b7106f4f7d8ae886bef4e598b1.png]: https://img-blog.csdnimg.cn/ded108b7106f4f7d8ae886bef4e598b1.png