Vue3-huohuo-admin快速搭建脚手架项目（下）

2023-10-02 06:07:06

plugins 项目插件配置

这里主要是引入一些开发中需要用到的插件，并进行自定义配置。

// plugins/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { createRouter } from '@/router'

import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'

import '@vueuse/core'

export function setupPlugins(app) {
  // 安装路由插件
  app.use(VueRouter)

  // 创建路由对象
  const router = createRouter()

  // 将路由对象挂载到Vue实例
  app.use(router)

  // 创建Pinia实例
  const pinia = createPinia()

  // 将Pinia实例挂载到Vue实例
  app.use(pinia)

  // 创建国际化实例
  const i18n = createI18n({
    locale: 'zh-CN',
    messages: {
      'zh-CN': require('@/locales/zh-CN.json')
    }
  })

  // 将国际化实例挂载到Vue实例
  app.use(i18n)

  // 安装vue-router
  app.use(VueRouter)

  // 安装@vueuse/core
  app.use(@vueuse/core)
}

vue-router

vue-router 是 Vue.js 官方的路由插件，用于管理单页面应用程序中的路由。它提供了 Vue.js 应用程序中导航的功能，使应用程序能够在不同页面之间切换。

@vueuse/core

@vueuse/core 是一个 Vue 3 的工具库，它提供了许多常用的工具函数，可以帮助我们快速开发 Vue 3 应用程序。这些工具函数包括状态管理、事件处理、异步操作等。

vuex

vuex 是一个集中式的状态管理库，用于管理 Vue.js 应用程序中的状态。它提供了一个全局的状态对象，应用程序中的各个组件都可以访问这个状态对象。

i18n

i18n 是一个国际化库，用于将 Vue.js 应用程序翻译成不同的语言。它提供了一个翻译字符串的函数，我们可以通过这个函数将应用程序中的字符串翻译成不同的语言。

plugins 的配置

在 plugins/index.js 文件中，我们对一些插件进行了配置。

// plugins/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { createRouter } from '@/router'

import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'

import '@vueuse/core'

export function setupPlugins(app) {
  // 安装路由插件
  app.use(VueRouter)

  // 创建路由对象
  const router = createRouter()

  // 将路由对象挂载到Vue实例
  app.use(router)

  // 创建Pinia实例
  const pinia = createPinia()

  // 将Pinia实例挂载到Vue实例
  app.use(pinia)

  // 创建国际化实例
  const i18n = createI18n({
    locale: 'zh-CN',
    messages: {
      'zh-CN': require('@/locales/zh-CN.json')
    }
  })

  // 将国际化实例挂载到Vue实例
  app.use(i18n)

  // 安装vue-router
  app.use(VueRouter)

  // 安装@vueuse/core
  app.use(@vueuse/core)
}

node_modules 安装依赖库

在 node_modules 文件夹中，我们可以看到已经安装了大量的依赖库。这些依赖库都是我们开发项目所必需的。

node_modules
├── @babel
├── @popperjs
├── @vue
├── @vueuse
├── ant-design-vue
├── axios
├── buefy
├── core-js
├── dayjs
├── element-plus
├── event-source-polyfill
├── form-data
├── history
├── intl
├── js-cookie
├── json-bigint
├── lodash
├── markdown-it
├── markdown-it-container
├── moment
├── normalize.css
├── npm
├── path-to-regexp
├── pinia
├── process
├── qrcode.react
├── qs
├── resolve-url-loader
├── sass
├── sass-loader
├── stylelint
├── stylelint-config-standard
├── stylelint-webpack-plugin
├── terser
├── three
├── tiny-emitter
├── ts-loader
├── typescript
├── uglify-js
├── unplugin
├── vue
├── vue-composition-api
├── vue-countup
├── vue-draggable
├── vue-i18n
├── vue-loader
├── vue-router
├── vue-router-next
├── vue-template-compiler
├── vue-toastification
├── vuex
├── vuex-persistedstate
├── webpack
├── webpack-cli
├── webpack-dev-middleware
├── webpack-dev-server
├── webpack-hot-middleware
├── webpack-merge
├── webpack-node-externals
├── webpack-plugin-serve
├── webpack-sources
├── webpackbar
├── webpacker
├── x-frame-bypass
├── xmlhttprequest-ssl
└── yargs

这些依赖库的安装是通过 npm install 命令进行的。