搭建

安装环境

1. 安装 Node.js 和 npm

npm 是 Node.js 的包管理器，安装 Node.js 会同时安装 npm。你可以从 Node.js 官方网站下载和安装适用于你操作系统的安装包。

下载并安装 Node.js。安装过程中会自动安装 npm。

1. 验证安装

安装完成后，打开新的命令提示符（cmd）窗口，运行以下命令验证安装是否成功：

node -v

npm -v

如果正确安装，你应该会看到 Node.js 和 npm 的版本号输出。

2. 设置环境变量（如果需要）

在某些情况下，你可能需要手动将 Node.js 和 npm 的路径添加到系统的环境变量中。以下是如何在 Windows 上执行此操作的步骤：

  • 查找 Node.js 和 npm 的安装路径： 通常，默认安装路径是 C:\Program Files\nodejs\。

  • 打开系统环境变量设置：

    • 右键点击“计算机”或“此电脑”图标，选择“属性”。

    • 点击左侧的“高级系统设置”。

    • 在“系统属性”窗口中，点击“环境变量”。

  • 编辑 Path 变量：

    • 在“系统变量”部分，找到并选择 Path 变量，然后点击“编辑”。

    • 在“编辑环境变量”窗口中，点击“新建”，然后添加 Node.js 的安装路径，例如：C:\Program Files\nodejs\。

  • 保存并关闭所有窗口，然后重新打开命令提示符。

3. 安装 Vue CLI

验证 npm 是否可用后，继续安装 Vue CLI：

npm install -g @vue/cli

2. 安装 Git

下载 Git：

  • 前往 Git 官方网站，点击“Download”按钮下载适用于 Windows 的 Git 安装包。

安装 Git：

  • 运行下载的安装包，按照默认设置安装 Git。

  • 安装过程中，会有几个选项供选择，通常默认选项已经足够，但你可以根据需要进行调整。

验证安装

git --version


部署

1.克隆 Vue Element Admin 仓库

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin

2.安装项目依赖

npm install

3.运行开发服务器

npm run dev

打开浏览器，访问 http://localhost:9528，你会看到 Vue Element Admin 的示例界面。


配置

1.修改语言设置

  • 打开 src/lang/index.js 文件: 找到 src/lang/index.js 文件，打开它。

  • 修改默认语言: 将默认语言设置为中文：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import elementEnLocale from 'element-ui/lib/locale/lang/en'; // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN';// element-ui lang
import enLocale from './en';
import zhLocale from './zh';

Vue.use(VueI18n);

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
};

const i18n = new VueI18n({
  locale: 'zh', // 设置默认语言为中文
  messages
});

export default i18n;

配置主文件: 确保在 src/main.js 中引入并使用 i18n：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './lang'; // 导入 i18n 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/styles/index.scss'; // global css

Vue.config.productionTip = false;

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
});

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 使用 i18n
  render: h => h(App)
});

确认中文翻译文件: 确保 src/lang/zh.js 文件包含了所有必要的中文翻译：

export default {
  route: {
    dashboard: '首页',
    // 其他路由的翻译...
  },
  navbar: {
    logOut: '退出登录',
    dashboard: '首页',
    // 其他导航栏的翻译...
  },
  // 其他部分的翻译...
};

测试语言切换 确保所有配置正确后，重新启动开发服务器：

npm run dev

打开浏览器，访问 http://localhost:9528，你应该会看到界面已经切换成中文。