文章目录
- 一、前端工作第一天需要哪些环境配置
- 二、Vscode
- 2.1、官网
- 2.2、插件
- 三、Nodejs
- 3.1、官网
- 3.2、nodejs安装及环境变量配置【了解即可】
- 3.3、nodejs安装
- 3.4、npm插件
- 四、Postman
- 五、谷歌下载插件的地址
- 六、Vue2
- 6.1、搭建脚手架【了解即可】
- 6.2、脚手架、创建项目、库
- 6.3、Vue2库
- 6.4、解决跨越【服务器代理】
- 七、typeScript
- 7.1、官网
- 7.2、ts简介
- 1、安装
- 2、typeScript文件结构
- 3、配置自动编辑
- 八、Vue3
- 8.1、Vue3环境搭建以及额外配置
- 九、GIT
- 十、扩展知识点
- 10.1、常用的网页工具
- 10.2、开发常用官网
- 10.3、vue-cli中-S和-D的区别
- 10.3、CSS中常见知识点
一、前端工作第一天需要哪些环境配置
- 首先是vscode/其他编译器的安装
- 然后是node.js的安装和配置，不能全局使用的话记得配一下环境变量
- 谷歌等开发浏览器
- 大部分公司用的git代码管理工具，记得配置一下
- 最后的话就根据不同公司要求，下载需要的软件即可
二、Vscode
2.1、官网
2.2、插件
插件名 | 功能 | 备注 |
| 中文 | |
| 用于实现编写less文件后生成css，快捷键ctrl+s在less文件上 | |
| 让 html 标签上写class 智能提示当前项目所支持的样式 | |
| 能够开启一个本地服务器，更好的实时预览开发的项目 | |
| 快速打开HTML文件到浏览器预览 | |
| px可以转换为rem或者vw， 同时界面也会显示px对应多少rem单位 | |
| 丰富注释颜色 | |
| Vue2常用插件【.vue文件内容显示高亮】 | Vue3要禁用 |
| git常用插件 |
扩展
- Live Server插件都哪些功能需要进行测试：1. cookie 2. ES6模板语法
Git Graph合并分支英文对应的命令:
- Accept Current Change：采用当前更改
- Accept Incoming Change：采用传入的更改
- Accept Both Changes：保留双方更改
- Compare Changes：比较变更
三、Nodejs
3.1、官网
3.2、nodejs安装及环境变量配置【了解即可】
3.3、nodejs安装
3.4、npm插件
四、Postman
官网下载链接
介绍
- 前端测试接口的一个APP【支持post和get】
注意
- 浏览器只支持GET请求，POST不支持，所以这个时候就需要借助postman这个APP了
五、谷歌下载插件的地址
- 里面可以下载vue2以及vue3提示工具等等
六、Vue2
6.1、搭建脚手架【了解即可】
链接：
6.2、脚手架、创建项目、库
链接：
6.3、Vue2库
链接：
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、配置自动编辑
配置
- 【前提】在指定的项目文件夹路径下配置
npm init
- 会得到一个
tsconfig.json文件 - 作用：项目初始化
- 配置
tsconfig.json文件
- 搜索
ourDir和rootDir配置，自己找比较麻烦
OutDir: "./ts/dist/";
rootDir: "./ts/src/";
// outDir: 输出目录；rootDir：根目录npm --watch开启监听
- 自动编辑配置完事
- 作用：ts文件保存转换为js文件
注意
- 配置完一定要开启监听，要不然ts文件保存不会转换为js文件
八、Vue3
8.1、Vue3环境搭建以及额外配置
九、GIT
官网链接
安装教程
注意
- 安装选择 Standalone Installer
十、扩展知识点
10.1、常用的网页工具
介绍 | 功能 | 官网 |
网易有道词典 | 中英文翻译 | |
boardMix | 流程图绘制 |
10.2、开发常用官网
小程序开发
10.3、vue-cli中-S和-D的区别
链接
10.3、CSS中常见知识点
- vw单位转换：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
