上篇文章地址：Vue3和Vue2的区别

前言

上篇文章给大家介绍了一下Vue3和Vue2的一些区别，这篇文章就来和大家说一下Vue3中的配置，废话不多说，我们直接开干

vue-router

Vue3中配置vue-router和Vue2还是有一些区别的

下面两个代码块分别代表了Vue2和Vue3的vue-router配置

首先，安装 vue-router

    npm install vue-router@4

这里安装的是 vue-router4的版本，如果想修改版本的话，可以在@后面接自己想接的版本号

Vue2

1. 在 src 源代码目录下，新建router/index.js路由模块

    // 1. 导入 Vue 和 Vue-Router 的包
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    // 2. 调用 Vue.use() 函数，把 VueRouter 安装为 Vue 插件
    Vue.use(VueRouter)

    // 3. 创建路由的实例对象
    const router = new VueRouter()

    // 4. 向外共享路由的实例对象
    export default router

2. 在 main.js 中引入并配置 router

    // 5. 导入路由模块 在 main.js 中
    // 默认情况下不输入文件地址会自动查找该目录下名称为 index.js 的文件
    import router from '@/router'

    // vue 项目中要用路由，就必须把路有实例对象通过下面的方式挂载
    new Vue({
      // 属性名和属性值相同，可以简写
      router
    })

Vue3

1. 在 src 目录下新建 router 和 views 目录，并在router/index.js中进行配置

    // 引入 createRouter 和 createWebHistory 方法
    import { createRouter, createWebHistory } from 'vue-router'
    
    // 使用 createRouter 方法创建路由对象，并赋值给 router 常量 
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          component: () => import('@/views/props.vue')  // .vue不能省略
        }
      ]
    })
    
    // 导出 router
    export default router

2. 在 main.js 中进行调用

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

vuex

安装vuex

    npm install vuex --save

Vue2

1. 在 src 目录下创建 store 文件夹，并新建 index.js 文件，输入以下代码：

    // 1.导入 vuex 包
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)

    // 2.导出 vuex 对象
    export default new Vuex.Store({
      state: {},
      mutations: {},
      actions: {},
      modules: {},
      plugins: []
    })

2. 在 main.js 中挂在 vuex

    import store from './store'
    new Vue({
      store
    })

Vue3

1. 在 src 目录下创建 store 文件夹，并新建 index.js 文件，输入以下代码：

    import { createStore } from 'vuex'
    const store = createStore({
      state: {
        test: 'test'
      },
      mutations: {},
      actions: {},
      getters: {}
    })
    export default store

2. main.js 中进行调用

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

Vue3配置路径别名

• 在项目根目录下的vite.config.js文件中输入以下代码(没有就手动建一个)：

    // 引入 path 模块
    import * as path from 'path'
    // 开始配置
    export default defineConfig({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src')
        }
      }
    })

总结

本篇文章要写的内容就这些了，希望对各位有帮助吧，让我们一起成长

下篇文章地址：nodejs连接mysql