前端开发环境准备

墨蓝 2022-09-14 14:24 247阅读 0赞

# 一 安装 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][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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 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 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_18_color_FFFFFF_t_70_g_se_x_16][]

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

[GitHub - PanJiaChen_vue-element-admin_ A magical vue admin https_panjiachen.github.io_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f9a64ab3df0c43748f834f6dae923186.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/5b54761d65974f909d02240769c335ca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/fa618e1fd45344139d27e12acab29b84.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1499decfe0e243389e69de4c5dea9004.png