Vue3 语法笔记：在 Vite 2 中配置 Axios、Router、Vuex 和 Element UI

2024-01-24 23:21:14

前言

Vue 3 是一个强大的 JavaScript 框架，可以帮助我们构建复杂的单页面应用程序 (SPA)。Vite 2 是一个现代的构建工具，可以快速编译和构建 Vue 3 项目。在这篇文章中，我们将学习如何使用 Vite 2、Axios、Router、Vuex 和 Element UI 来配置 Vue 3 项目。

安装

首先，我们需要安装必要的依赖项：

npm install vue@3 vite@2 axios vue-router@4 vuex element-ui

创建项目

创建一个新的 Vite 2 项目：

mkdir vue3-project
cd vue3-project
vite init vue

配置 Vite

在 vite.config.js 中，我们需要添加以下配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

配置 Vuex

在 src/store/index.js 中，我们需要创建一个 Vuex 仓库：

// src/store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

export default store

配置 Router

在 src/router/index.js 中，我们需要创建一个 Vue Router 实例：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

配置 Axios

在 src/main.js 中，我们需要配置 Axios：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

配置 Element UI

在 src/main.js 中，我们需要配置 Element UI：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui'

axios.defaults.baseURL = 'http://localhost:3000'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementUI)
app.mount('#app')