一?安裝?nodejs

安裝完后，通過版本查看是否安裝成功

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

二?安裝一些必要的 npm?全局包

NPM全 稱 Node Package Manager，是 Node.js 包管理工具，是全球最大的模塊生態(tài)系統(tǒng)，里面所有的模塊都是開源免費(fèi)的；也是 Node.js 的包管理工具，相當(dāng)于前端的 Maven。

C:\Users\chengqiuming>npm -v 6.14.4

配置?npm?的淘寶鏡像

# 經(jīng)過下面的配置，以后所有的 npm install 都會(huì)經(jīng)過淘寶的鏡像地址下載 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 的基本環(huán)境搭建

1?GitHub地址

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

2?安裝項(xiàng)目依賴

# 安裝依賴 E:\vue-sdgt>npm install # 啟動(dòng)。執(zhí)行后，瀏覽器自動(dòng)彈出并訪問http://localhost:9528/ npm run dev

此時(shí)直接登錄會(huì)報(bào)錯(cuò)，還需要修改一些代碼。

3?對(duì)?E:\vue-sdgt\config\index.js?文件改造

4?對(duì)?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) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組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) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組// 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?重啟項(xiàng)目，登錄測(cè)試，成功

后續(xù)就在此基礎(chǔ)上進(jìn)行業(yè)務(wù)開發(fā)了。

總結(jié)

以上是生活随笔為你收集整理的前端开发环境准备的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。