Vue.js Admin 学习指南：打造动态、可扩展的管理界面

2023-11-03 03:03:54

前言

Vue.js Admin 作为 JavaScript 框架中的佼佼者，凭借其轻量、灵活的特点，在构建管理界面时备受青睐。本指南将带领您步入 Vue.js Admin 的世界，从零开始打造动态、可扩展的管理界面，为您的 Web 应用程序增添活力。

开发基础

1. 安装依赖

首先，在终端中运行以下命令安装 Vue.js Admin 依赖：

npm install vue-admin

2. 创建项目

安装完成之后，执行以下命令初始化项目：

vue-admin create my-admin

接下来，您将进入项目目录，并看到项目结构已自动生成。

定制配置

1. vue.config.js

在项目根目录下的 vue.config.js 文件中，您可以进行以下配置：

指定应用程序上下文：

module.exports = {
  // ...
  publicPath: '/my-admin',
  // ...
};

设置端口号：

module.exports = {
  // ...
  devServer: {
    port: 8081,
    // ...
  },
  // ...
};

2. Webpack 配置

在根目录下的 build 目录中，找到 webpack.base.conf.js 和 webpack.dev.conf.js 文件。

配置webpack：

module.exports = {
  // ...
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '../src')
      }
    }
  },
  // ...
};

设置一个组件存放路径的别名：

module.exports = {
  // ...
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, '../src'))
      .set('@components', path.resolve(__dirname, '../src/components'));
  },
  // ...
};