前端环境搭建【主文章】

---

一、前端工作第一天需要哪些环境配置

1. 首先是vscode/其他编译器的安装
2. 然后是node.js的安装和配置，不能全局使用的话记得配一下环境变量
3. 谷歌等开发浏览器
4. 大部分公司用的git代码管理工具，记得配置一下
5. 最后的话就根据不同公司要求，下载需要的软件即可

---

二、Vscode

2.1、官网

https://code.visualstudio.com/

2.2、插件

插件名	功能	备注
Chinese	中文
Easy Less	用于实现编写less文件后生成css，快捷键ctrl+s在less文件上
HTML CSS Support	让 html 标签上写class 智能提示当前项目所支持的样式
Live Server	能够开启一个本地服务器，更好的实时预览开发的项目
open in browser	快速打开HTML文件到浏览器预览
px to rem & rpx & vw (cssrem)	px可以转换为rem或者vw， 同时界面也会显示px对应多少rem单位
Better Comments	丰富注释颜色
Vuter	Vue2常用插件【.vue文件内容显示高亮】	Vue3要禁用
Git Graph	git常用插件

扩展

• Live Server插件都哪些功能需要进行测试：1. cookie 2. ES6模板语法
• Git Graph合并分支英文对应的命令:
  1. Accept Current Change：采用当前更改
  2. Accept Incoming Change：采用传入的更改
  3. Accept Both Changes：保留双方更改
  4. Compare Changes：比较变更

---

三、Nodejs

3.1、官网

https://nodejs.org/en/download/

3.2、nodejs安装及环境变量配置【了解即可】

https://blog.csdn.net/Lancelot38/article/details/125887397

3.3、nodejs安装

https://blog.csdn.net/Dteamdoat/article/details/128311209?

3.4、npm插件

https://blog.csdn.net/Dteamdoat/article/details/129306271?

---

四、Postman

官网下载链接

• https://www.postman.com/downloads/?utm_source=postman-home

介绍

• 前端测试接口的一个APP【支持post和get】

注意

• 浏览器只支持GET请求，POST不支持，所以这个时候就需要借助postman这个APP了

---

五、谷歌下载插件的地址

极简插件链接：https://chrome.zzzmh.cn/#/index

• 里面可以下载vue2以及vue3提示工具等等

---

六、Vue2

6.1、搭建脚手架【了解即可】

链接：https://blog.csdn.net/weixin_56663198/article/details/127110135

6.2、脚手架、创建项目、库

链接：https://blog.csdn.net/Dteamdoat/article/details/129307251

6.3、Vue2库

链接：https://blog.csdn.net/Dteamdoat/article/details/129368386

6.4、解决跨越【服务器代理】

• 文件vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  
  // 服务器代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8089', //跨域请求的公共地址
        ws: false, //也可以忽略不写，不写不会影响跨域
        changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
        pathRewrite: {
          '^/api': '' //注册全局路径， 但是在你请求的时候前面需要加上 /api
        }
      }
    }
  }
  
})

---

七、typeScript

7.1、官网

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

7.2、ts简介

下述的配置以及安装只是适用于初始学习ts，不适用于项目，Vue3项目之中只需要在搭建的时候就配置了就可以【了解即可】

1、安装

• typeScript安装是全局安装；

npm i -g typescript

2、typeScript文件结构

• 脚手架：src/ts
  • ts/dist文件夹：存储ts转换为js的文件夹
  • ts/src文件夹：存储ts文件
• 普通项目结构:
  • 项目目录下创建ts文件夹，然后跟上述一样

3、配置自动编辑

配置

• 【前提】在指定的项目文件夹路径下配置

1. npm init
   • 会得到一个tsconfig.json文件
   • 作用：项目初始化
2. 配置tsconfig.json文件
   • 搜索ourDir和rootDir配置，自己找比较麻烦

   	OutDir: "./ts/dist/";
   	rootDir: "./ts/src/";
   	// outDir: 输出目录；rootDir：根目录
   

3. npm --watch开启监听
   • 自动编辑配置完事
   • 作用：ts文件保存转换为js文件

注意

1. 配置完一定要开启监听，要不然ts文件保存不会转换为js文件

---

八、Vue3

8.1、Vue3环境搭建以及额外配置

• https://blog.csdn.net/Dteamdoat/article/details/129808681

---

九、GIT

官网链接

• https://git-scm.com/

安装教程

• https://www.cnblogs.com/kevinzhushrek/p/16092144.html

注意

• 安装选择 Standalone Installer

---

十、扩展知识点

10.1、常用的网页工具

介绍	功能	官网
网易有道词典	中英文翻译	https://dict.youdao.com/?keyfrom=cidian
boardMix	流程图绘制	https://boardmix.cn/app/my-folder

---

10.2、开发常用官网

小程序开发

1. 微信开发者工具文档：官网
2. 微信公众平台：官网
3. uni-app：官网

---

10.3、vue-cli中-S和-D的区别

链接

• https://blog.csdn.net/Dteamdoat/article/details/130300430

---

10.3、CSS中常见知识点

1. vw单位转换：https://blog.csdn.net/mantou_riji/article/details/124270492

---