一 安装 nodejs

安装完后，通过版本查看是否安装成功

C:\Users\chengqiuming>node -v
v12.18.0

二 安装一些必要的 npm 全局包

NPM全 称 Node Package Manager，是 Node.js 包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是 Node.js 的包管理工具，相当于前端的 Maven。

C:\Users\chengqiuming>npm -v
6.14.4

配置 npm 的淘宝镜像

# 经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
# 查看 npm 配置信息
C:\Users\chengqiuming>npm config list
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.14.4 node/v12.18.0 win32 x64"

; userconfig C:\Users\chengqiuming\.npmrc
registry = "https://registry.npm.taobao.org/"

; builtin config undefined
prefix = "C:\\Users\\chengqiuming\\AppData\\Roaming\\npm"

; node bin location = D:\Program Files\nodejs\node.exe
; cwd = C:\Users\chengqiuming
; HOME = C:\Users\chengqiuming
; "npm config ls -l" to show all defaults.

全局安装 webpack

npm install -g webpack
npm install -g webpack-cli
C:\Users\chengqiuming>webpack -v
webpack: 5.58.0
webpack-cli: 4.9.0
webpack-dev-server not installed

全局安装 Babel

npm install -g babel-cli
# 查看是否安装成功
C:\Users\chengqiuming>babel --version
6.26.0 (babel-core 6.26.3)

三 vue-element-admin 的基本环境搭建

1 GitHub地址

GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

2 安装项目依赖

# 安装依赖
E:\vue-sdgt>npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

此时直接登录会报错，还需要修改一些代码。

3 对 E:\vue-sdgt\config\index.js 文件改造

4 对 E:\vue-sdgt\src\store\modules\user.js 文件修改，使得先能顺利登录

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    name: '',
    avatar: '',
    roles: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const data = {"token":"admin"}
      setToken(data.token)
      commit('SET_TOKEN', data.token)
      // const username = userInfo.username.trim()
      // return new Promise((resolve, reject) => {
      //   login(username, userInfo.password).then(response => {
      //     const data = response.data
      //     setToken(data.token)
      //     commit('SET_TOKEN', data.token)
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })


    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      const data = {'roles':'admin','name':'admin','avatar':'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'}
      if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)
      // return new Promise((resolve, reject) => {
      //   getInfo(state.token).then(response => {
      //     const data = response.data
      //     if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
      //       commit('SET_ROLES', data.roles)
      //     } else {
      //       reject('getInfo: roles must be a non-null array !')
      //     }
      //     commit('SET_NAME', data.name)
      //     commit('SET_AVATAR', data.avatar)
      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 登出
    LogOut({ commit, state }) {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      // return new Promise((resolve, reject) => {
      //   logout(state.token).then(() => {
      //     commit('SET_TOKEN', '')
      //     commit('SET_ROLES', [])
      //     removeToken()
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      //return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      //})
    }
  }
}

export default user

5 修改 E:\vue-sdgt\src\utils\request.js

6 重启项目，登录测试，成功

后续就在此基础上进行业务开发了。