Web开发-基础环境配置
回炉再造！2021 Vue3.0 前端全家桶学习笔记
web前端职业发展路线
技术范围广，发展速度快，兼容浏览器众多：
- 核心技术：html css JavaScript（BOM、DOM）
- 新的技术：html5 css3 ES6
- 旧框架：jQuery直接操作DOM、BootStrap
- 新框架：虚拟DOM，Vue、React、AngularJS、微信小程序、WebAPP；
- 还需要了解一定的Nodejs
通用工具：
- NPM：包管理器
- WebPack：打包工具
- ES6：更高效的语法，相较于ES5变化较大；
- axios：异步请求，结合了promise等ES6语法；
npm
内容：
- 认识npm
- 安装npm
- 使用npm工具 管理包
- 了解package.json文件
- package.json文件详解
- 模块的基本应用
- npm和yarn的对比和迁移
npm安装
node的包管理器，是Nodejs默认的、以JavaScript编写的软件包管理系统；使用npm来分享和使用代码已经成了前端的标配；可以有效的解决包之间的依赖；
前端静态资源库：可以用来查询安装方式和CDN链接；
npm本身也是基于Nodejs开发的软件，安装完Node后，会默认安装好npm；
npm -v
npm install npm -g // 重新安装npm -g 全局安装后 任意文件夹都可以使用
npm uninstall xxx
cd 指定项目目录
npm install xxx // 当前目录 局部安装
dir // 查看当前目录（window命令）
ls
默认使用地址是国外的，可以使用国内镜像源 清华镜像 淘宝镜像等，可以提高下载速度：
// 查看镜像的配置结果
npm config get registry
npm config get disturl
// 搭建环境时，将npm设置成淘宝镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
// 设置当前地址（设置为默认的国外地址）
npm config set registry https://registry.npmjs.org/
// 可以使用淘宝定制的cnpm命令行工具代替默认的npm；
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 使用nrm工具切换淘宝源
npx nrm use tabobao
// 如果之后需要切换回官方源 可使用
npx nrm use npm
npm使用
npm -v // 查看版本 判断npm安装与否
npm install xxx // 安装模块
npm install xxx -g // 全局安装 可以直接在命令行里使用
npm list -g // 查看所有全局安装的模块
npm list vue // 查看某个模块（如vue）的版本号
npm -g install npm@5.9.1 // 更新npm到指定版本
npm install -save xxx // -save可以在package文件的dependencies节点写入依赖
npm install -save-dev xxx // -save-dev会在package的devDependencies节点写入依赖
npm uninstall xxx // 卸载
npm update xxx // 默认更新到最新版本
dependencies节点下的依赖，表示运行时依赖，即生产环境下还需使用的模块；
devDependencies节点下的依赖，表示开发时的依赖，里边的模块是开发时用的，发布时用不到；如自动化构建工具gulp以及压缩css、js等的模块，这些在项目部署后是不需要的；
在package.json目录 执行npm install默认会更具配置文件中的dependencies、devDependencies节点信息进行包的初始化模块安装；
package.json配置文件属性解析
name // 包名
version // 包的版本
description // 包的描述
homepage // 包的官网url
author // 包的作者姓名
contributors // 包的其他贡献者姓名
dependencies // 依赖包列表，如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
repository // 包代码存放的地方的类型，可以是git或svn
main // 指定程序的入口文件，require('moduleName')会加载这个文件；这个字段的默认值是模块根目录下的index.js
keywords // 关键字
关于package.json中配置版本号的说明
-
5.0.1，表示安装包的指定版本
-
~5.0.3，表示安装5.0.x中的最新版本
-
^5.0.3，表示安装5.x.x中的最新版本
使用npm init --yes命令会默认生成一个package.json的配置文件，我们可以在这个基础之上继续进行修改；
{
"name":"xxx",
"version":"1.0.1",
"description":"something",
"main":"index.js",
"scripts":{
"test":"ls"
},
"repository":{
"type":"git",
"url":"git"
},
"keyword":[
"edu",
"work",
"vue",
"react"
],
"author":"xxx",
"license":"MIT"
}
包的使用
npm常用命令：（nodejs相关）
- 使用
npm help可以查看所有命令，如 install 和 publish；
- 使用
npm help <command>可以查看某条命令的详细帮助，如npm help install
-
npm update <package> 更新当前目录node_modules子目录下对应的模块到最新版本
-
npm update <package> -g 可以把全局安装的对应命令行程序更新至最新版本
- 使用
npm cache clear 可以清空NPM本地缓存，用于对付使用相同版本号发布新版本的人
- 使用
npm unpublish <package>@<version> 可以撤销自己发布过的某个版本的代码
- 在package.json所在目录使用
npm install . -g 可先在本地安装当前命令行程序，可用于发布前的本地测试；
包的使用：
- 通过命令行 使用 npm 下载和更新包；
- 没用webpack前，需要搜索整个 node_modules目录来定位包的路径，继而添加到html中；
大多数编程语言都会提供一个文件导入另一个文件代码的机制；但是，js在最初设计时并没有这个特性，因为js原本只是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（处于安全考虑）；所以很长一段时间以来，组织多个文件的js代码就是把每个文件下载下来，变量是全局共享的；
- CommonJS中很大一部分便是对模块系统的规范
- 使用require语句导入包；
- 新的ES6可以使用import导入包；
// index.js
const $ = require('jquery')
$.ajax...
// test.js
module.exports = 100;
// index.js
let num = require('./test.js');
num;
ES6兼容性解决
- 兼容表：
http://kangax.github.io/compat-table/es6/
- 支持：IE10+、Chrome、FireFox、移动端、NodeJS
- 兼容低版本浏览器：
- 在线转换（这种编译会加大页面渲染时间），通过在html中加载一些工具包
- 提前编译（强烈建议这种方式，不影响浏览器渲染时间）
- 比较通用的兼容性问题解决方案有
babel、jsx、traceur、es6-shim等；
在线转换：
<!-- 在线装换举例：可在不兼容的浏览器上正常运行，如ie9 -->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
</head>
<body>
<script type="text/babel">
const name = "learn"
