前端—环境配置

前端开发建议用 Google Chrome 浏览器

vscode https://code.visualstudio.com

用户代码片段

…

JavaScript 与 TypeScript

• JavaScript 的执行引擎是 V8引擎。
• node是基于V8引擎来执行JavaScript的。
• TypeScript 通过编译器最终转化为 JavaScript 代码。

  	//安装 npm i -g typescript@4.5.2 //ts初始化项目，生成tsconfig.json文件tsc init //将写好的ts文件 编译成 js文件tsc demo.ts 
  

jQuery https://jquery.com

Bootstrap 响应式框架 https://getbootstrap.com

包管理器

常见的包管理器有： brew、yarn、npm、bower
1、npm https://www.npmjs.com
网站 是开发发着查找包（package）、设置参数以及管理 npm 使用体验的主要途径。注册表 是一个巨大的数据库，保存了每个包的信息。

//npm 简单使用：
npm install jquery 
npm i jquery@1.7.2
npm uninstall jquery
npm install -g less

nodejs 和 nvm

一、Node.js®是基于 Chrome的V8 JavaScript 引擎构建的JavaScript运行环境。
二、node官网: https://www.nodejs.com
三、Node 打破了过去 JavaScript 只能在浏览器中运行的局面。前后端编程环境统一，大大降低了前后端语言切换的代价。以下是Node可以实现的工作：（仅作了解）

• Web 服务器
• 命令行工具
• 网络爬虫
• 桌面应用程序开发（Electron）
• app
• 嵌入式
• 游戏
• …

四、直接安装 node

node 的安装包含了 node 和 npm，node 是 javascript 的解释器，npm是包管理工具。
1、下载安装好并安装完成后
2、检查是否成功

node -v //检查node是否安装好
npm -v //见擦汗npm是否安装好

3、设置npm镜像源（加速）
npm install -g cmpm —registry=https://registry.npm.taobao.org
4、node_models 存放下载的包，apckage-lock.json 包的信息。

五、通过 nvm 安装 node

1、NodeJS有太多的版本了，在不同的项目开发过程中，可能需要我们在电脑中同时存在多个不同版本的Node。这时候就需要一个软件，nvm （node.js version manager 的简写）翻译过来 nodejs 版本管理器。
2、安装nvm
nvm下载链接 https://github.com/coreybutler/nvm-windows/releasesd
简单使用

# 安装指定版本
nvm install 10.15.0 # 安装最新版本
nvm install latest# 使用安装的这个版本10.15.0
nvm use 10.15.0
# 查看node版本
node -v

镜像（加速）./nvm 目录下的settings.txt的最后

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

自动化构建工具 glup 和 webpack（重点）

1、常见的构建工具：Npm Grunt Glup Fis3 Webpack Rollup
2、构建工具就是做这件事，将源代码转换成可以执行的 javascript 、css 、html 代码，包括如下内容：

• 代码转换：比如 TypeScript 编译成 JavaScript，SCSS 编译成 CSS 等。
• 文件优化：压缩 JavaScript、CSS、HTML代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步加载。
• 模块合并：…
• 自动刷新：监听本地源代码变化， 自动重新构建，刷新到浏览器。
• 代码校验：…
• 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

glup https://www.gulpjs.com.cn

npm install gulp@3.9.1  -g      //  **使用npm 安装gulp     -g 表示全局安装，没有-g表示本地安装**
npm install gulp@3.9.1 
gulp -v      查看gulp版本

webpack（自动化 模块化 前端开发构建工具）

从本质上来说，webpack是一个静态模块打包工具。

1、 生成项目依赖文件

// 执行后生成package.json文件
npm init -y

2、安装依赖（node环境在12.10.0下！）

nvm install 12.10.0
nvm use 12.10.0
npm i webpack@4.44.1 webpack-cli@3.3.12 -g

// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里，也可以用 --save-dev代替
npm install webpack@4.44.1 webpack-cli@3.3.12 -D// 全局安装webpack和webpack-cli
npm i webpack@4.44.1 webpack-cli@3.3.12 -g// -S是--save的简写，这样安装的话，会安装到dependencies(生产环境)对象里，也可以用 --save代替
npm install jquery -S

package.json

{"name": "webpack-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.40.2","webpack-cli": "^3.3.9"},"dependencies": {"jquery": "^3.4.1"}
}

devDependencies与dependencies的区别：

在发布npm包的时候，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了；但对于项目而言，npm install 会自动下载devDependencies和dependencies下面的模块。

3、通过webpack打包
第一种打包方式：直接使用命令

// 执行命令  output输出
webpack index.js -o dist/bundle.js

第二种打包方式：通过package.json配置命令
package.json

{"name": "webpack-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack index.js -o dist/bundle.js"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.40.2","webpack-cli": "^3.3.9"},"dependencies": {"jquery": "^3.4.1"}
}

执行package.json文件中添加的start命令

// 生成 dist文件夹和bundle.js文件
npm run start

**打包后使用：**然后再把index.html原来引入index.js的地方改成是通过webpack生成的bundle.js

<!--index.html文件-->
<!--<script src="./index.js"></script>-->
<script src="./dist/bundle.js"></script>

优化
webpack index.js -o dist/bundle.js 这一句其实是可以写在一个配置文件里

webpack.config.js

const path = require('path');module.exports = {entry: path.join(__dirname, './index.js'),	// dirname代表索引到文件所在目录output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'}
}

package.json：

"scripts": {"start": "webpack --config webpack.config.js"}

webpack-dev-server 热更新
npm install webpack-dev-server@3.11.2 -D
package.json：

"scripts": {"start": "webpack-dev-server --config webpack.config.js --open --port 3002 --hot"}
// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot  自动更新

如果没有其他的webpack配置项，上面的命令也可以简写为：

"scripts": {
"start": "webpack-dev-server --open --port 3002 --hot"
}

index.html

<script src="./bundle.js"></script>

…
more
html-webpack-plugin
…
css-loader
…
ES6 转 ES5
…
html热更新
…

Vue

vue

使用Vue的方式有很多：

方式一：直接 CDN服务器 引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js

方式三：​通过Vue-Cli3(官方脚手架)方式引入

//安装Vue CLI脚手架的包
npm install -g @vue/cli
# OR
yarn global add @vue/cli

//检查安装
vue --version
vue -V

//创建项目
vue create hello-world

vuex

vuex就是vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问。
1、《官网vuex安装》。
2、vuex有以下常用的几个核心属性概念：

• State
• Getters
• Mutations
• Actions
• Modules

Vue-Devtools

Vue.js Devtools_x.x.x.crx 为浏览器插件，用于调试vue项目
1、下载 vue-devtools 工具
进入GitHub官网进行下载，网址：https://github.com/vuejs/vue-devtools
2、编译 vue-devtools （方法百度）
3、最终得到 后缀为 .crx 的插件
4、插件拖入 Chrome 浏览器拓展中即可。

像一些使用Vue完成的项目，右上角的Vue图标会亮起：
1） https://www.bilibili.com （bilibili）
2） http://m.sohu.com （手机搜狐网）
3） http://element.eleme.io/#/en-US

Vite

vite（脚手架）比 vue-cli（官方脚手架）更受欢迎、更轻快

//创建项目命令
npm init vite

HTTP 请求库

ajax

Axios

1、在Vue和React等大型项目中，我们常用的数据请求方式，就是Axios。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
2、官网地址：http://www.axios-js.com
3、安装

yarn add axios

4、使用

axios.get(url[, config])
axios.post(url[, data[, config]])// 直白一点表示：
axios.get(url, {params: {}}).then(res=>{}).catch(err=>{})axios.post('/user', {}).then(res=>{}).catch(err=>{})