2024年最新搭建项目前端环境，作为一个前端开发者

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

百度云链接：https://pan.baidu.com/s/1XWHu5bOIMVv6QoEGZ2_U9A

提取码：gvll

复制这段内容后打开百度网盘手机App，操作更方便哦

2.2、安装

---

2.2.1、下载依赖

下载依赖

npm install

下载好的依赖都在node_modules文件下

2.2.2、启动

npm run dev

执行后，浏览器自动弹出并访问http://localhost:9528/

3、前端框架讲解

=======================================================================

修改下面的值。该值默认为ture，意思是使用Eslint，即会检查语法。但其检查过于严格，建议将值改为false。

3.1、目录结构

---

vue-element-admin-master（拥有完整的功能的插件）

3.2、关键文件

---

vue-admin-template-master（源码相对简单，我们的后台管理系统基于这个版本）

3.2.1、package.js

npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本，相当于maven中的pom.xml文件。主要做依赖版本控制。

• 启动项目的命令： npm run dev

• dev脚本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

• webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目

• –inline：一种启动模式

• –progress：显示启动进度

• –config build/webpack.dev.conf.js：指定webpack配置文件所在位置

3.2.2 、build/webpack.dev.conf.js

webpack配置文件，包含项目在开发环境打包和运行的相关配置

• webpack.dev.conf.js 中引用了 webpack.base.conf.js

• webpack.base.conf.js 中定义了项目打包的入口文件

在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。

因此生成的js文件会被自动插入到名为index.html的页面中

3.2.3、 index.html

项目默认的html页面

3.2.4、 src/main.js

项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象

3.2.5、config/dev.env.js

---

定义全局常量值

因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址

3.2.6、 src/utils/request.js

引入axios模块，定义全局的axios实例，并导出模块

3.2.7、 src/api/login.js

引用request模块，调用远程api

4、临时登录接口

=======================================================================

4.1、前端登录问题

---

默认情况下，前端项目已经实现了登录功能，后端连接到远程Mock平台的模拟数据接口进行登录，而Mock平台地址无效，导致前端的登录功能无法执行

4.2、解决登录问题

---

修改user.js文件内容

4.2.1、修改登录方法

4.2.2、修改获取用户信息的方法

4.2.3、修改登出的方法

4.2.4、修改前端 登出方法

![```html

在这里插入代码片

代码如下

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

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

ge/format,png)

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader