前端_环境配置_前端环境配置

一、jQuery

https://jquery.com
1、可以在官网进行 jquery 的下载（比如 jquery-3.4.1.js）。
2、jquery-3.4.1.min.js 是 jquery-3.4.1.js 的压缩版，功能一致。
3、<script src="./jquery-3.4.1.js"><script>

二、Bootstrap 响应式框架

https://getbootstrap.com
1、官网下载 bootstrap
2、bootstrap 依赖 jquery，需要先引入 jquery
3、具体查看官方文档

三、HTTP 请求库

ajax

Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript、XML、CSS和HTML等技术构建Web应用程序的方法。它通过异步通信实现了在不刷新整个页面的情况下更新部分页面的功能。

下面是一个基本的Ajax代码框架：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置响应的回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 处理响应数据
    var data = xhr.responseText;
    // 更新页面内容
    // ...
  }
};

// 发送异步请求
xhr.open('GET', 'url', true);
xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上述代码通过创建XMLHttpRequest对象来发送异步请求，设置响应的回调函数用于处理服务器返回的数据，并更新页面内容。

其中，readyState属性表示请求状态，取值为0、1、2、3、4，分别代表未初始化、正在加载、已加载、交互完成、已完成；status属性表示服务器返回的HTTP状态码，取值为200表示请求成功。

在发送请求时，可以使用open()方法设置请求方法、请求地址和是否异步；使用send()方法发送请求，并将请求数据作为参数传入。

需要注意的是，在使用Ajax时，应遵循同源策略，即Ajax只能向与当前页面同源的服务器发送请求。如果需要向不同源的服务器发送请求，可以使用JSONP等技术。

Axios

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

yarn add axios
1

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=>{})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四、包管理器

常见的包管理器有： 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
1
2
3
4
5

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是否安装好
1
2

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/releases
简单使用

# 查看有哪些nodejs版本
nvm list available

# 安装指定版本
nvm install 10.15.0 

# 安装最新版本
nvm install latest

# 使用安装的这个版本10.15.0
nvm use 10.15.0
# 查看node版本
node -v
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

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

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

glup

https://www.gulpjs.com.cn
Gulp是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文

件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：

• 通过 gulp.task 注册一个任务；
• 通过 gulp.src 读取文件；
• 通过 gulp.dest 写入文件。
• 通过 gulp.watch 监听文件变化；
• 通过 gulp.run 执行任务；

Gulp 的优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。
Gulp 的缺点：和Grunt 类似。集成度不高，要写很多配置后才可以用，无法做到开箱即用。

安装gulp

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

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

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

1、 生成项目依赖文件

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

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
1
2
3

// 最后的参数-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
1
2
3
4
5
6
7
8

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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

devDependencies与dependencies的区别：

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

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

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

第二种打包方式：通过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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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

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

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

优化
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'
  }
}
1
2
3
4
5
6
7
8
9

package.json：

"scripts": {
    "start": "webpack --config webpack.config.js"
  }
1
2
3

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  自动更新
1
2
3
4
5
6

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

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

index.html

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

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

vite

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

//创建项目命令
npm init vite
//后面根据提示操作即可
1
2
3

六、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>
1
2
3
4

方式二：下载和引入

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

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

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

//检查安装
vue --version
vue -V
1
2
3

//创建项目
vue create hello-world
1
2

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

七、React

1、构建一个名为 rdemo 项目（官方脚手架）

npx create-react-app rdemo
1

当看到如下界面说明安装成功，根据提示操作即可

Success! Created rdemo at A:\Desktop\react学习\rdemo
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd rdemo
  npm start

Happy hacking!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、react 路由配置

npm i react-router-dom --save-dev
1

3、vscode中 配置 jsx 编写优化
vscode中依次：文件》首选项》设置》搜索 Include Languages 》 添加项 》 项：javascritp 值：javascriptreact

vscode中依次：文件》首选项》设置》搜索 trigger 》 勾选 Tigger Expansion On Tab

快捷键 rcc 等等

4、ES7 React/Redux/GraphQL/React-Native （ vscode 插件 ）
vscode 快捷插件（功能类似用户代码片段）

5、redux 的安装

npm install redux
1

6、redyc-dev-toools 的安装
下载：https://github.com/reduxjs/redux-devtools/releases
下载好后直接拖入浏览器拓展即可

7、Ant Design 的安装

npm add antd
1