Vue前篇--大前端进阶知识点回顾

前提：作为一名Java后端程序员Vue显然也已经是必备技能了，而我们初学Vue的时候会牵扯到一系列陌生的名词，例如Webpack、Babel、ES6、Nodejs、npm包管理器、模块化开发等一些我们用模板引擎thymeleaf、jsp这些所不能体验到的开发好处！接下来让我们来了解一下上面的知识点，以便于我们更好的开始学习Vue

1.Nodejs（JavaScript的运行环境）

概念：是一个内置Googel的v8引擎的JavaScript的运行环境，使得JavaScript这一门弱类型脚本语言能够脱离浏览器单独运行，nodejs与JavaScript的关系就像是java与JDK的关系类似

1.1 nodejs的安装

去nodjs的官网选择对应版本安装完成后，通过node-v和npm-v来检查是否安装成功，如果成功会展示安装的版本号

这样我们的JavaScript的环境就已经准备好了

1.2 node初体验
我们可以创建一个.js的JavaScript文件

然后在当前js文件目录下打开终端执行命令： node helloworld.js

是不是跟java类似，例如java 和 javac命令让JavaScript脱离浏览器执行成功！

2.npm（就一个管理包工具）

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

1.构建Nodejs工程
- npm init 得到一个package.json文件，类似于我们maven中的pom.xml（核心文件）
- 使用npm init -y 免去繁琐的配置快速的构建出一个node工程

	{
       "name": "npm",   //工程名
       "version": "1.0.1",     //版本号
       "description": "这是第一个由npm管理的项目",     //描述
       "main": "index.js",
       "scripts": {
             "test": "echo \"Error: no test specified\" && exit 1"  //执行脚本
                  },
       "author": "宋淇祥", //开发者
       "license": "ISC"    //授权协议
     }

2.npm常用命令

    2-1快速安装依赖第三方模块？
        -npm install xxxx或者 npm i xxxx模块名，比如npm install mysql redis等等
    2-2安装的模块放在什么地方？
        -安装的模块放在项目当中的node_modules文件夹中
    2-3模块安装好如何使用？
        -const redis =require("redis")
    2-4模块下载很慢怎么解决？
        -npm install -g cnpm --registry=https://registry.npm.taobao.org
    2-5如何运行
        -node xxxx.js  运行时候是可以不加js的 直接node xxxx即可,终止命令：CTRL+C
    2-6下载的模块与package.json有什么联系呢？
        "dependencies": {
            "jquery": "^3.6.0",
            "mysql": "^2.18.1",
            "redis": "^3.1.2",
            "vue": "^2.6.12"
        }
        通过npm install 下载的依赖会被记录在package.json文件当中，
        类似于maven中的pom.xml文件 记录作用：复用
        1.package.json文件记录的依赖模块
        2.通过npm install可以直接把package.json中的依赖全部下载下来
        这样就可以避免重复下载依赖，很方便的去集成第三方模块
        3.为什么不直接拷贝node_moudles呢，当然可以，但是模块下载的依赖文件过多混乱文件很多，一般几万到几十万个文件
    2-7如果一次下载多个第三方依赖
        npm install vue redis mysql
        cnpm install vue redis mysql
        不添加版本号的情况下默认是下载最新的
    2-8如何下载指定版本号
        npm install redis@版本号   去官网查看版本号：https://www.npmjs.com/

3.如何卸载我们安装的第三方模块（从项目中剔除）

npm uninstall jquery vue

3.ES6（JavaScript的新语法规则）

ES6概述

3.1、let和const的引入

1.let解决了var定义变量的穿透问题
2. const解决了var定义常量可以被修改的问题
3. 实际开发中，如果是小程序/uniapp/一些脚手架，可以大胆的使用let和const
4.如果是web开发还是尽量使用var，因为低版本浏览器还暂时不支持let和const

3.2、默认参数

3.3、模板字符串

3.4、箭头函数【重点】

3.5、对象简写

举个例子：

3.6、对象解构

  //对象是以key-value的形式存在的，获取对象属和方法的方式有两种
        //方式一：通过.
        //方式二: 通过[]
         var name = "宋淇祥"
         var purpose = "好好学Vue和spring全家桶"
         let person2 ={
             name,                      //name = name
             purpose,                   //purpose = purpose
             go(){
                console.log("我坐在床上学习ES6新语法");
             }
         };

         //方式一,通过.的方式
         console.log(person2.name);
         console.log(person2.purpose);
         person2.go();

         //方式二,通过[]的方式
         console.log(person2["name"]);
         console.log(person2["purpose"]);
         person2["go"]();


         //ES6对象解构，其实就是快速获取属性和和方法的另一种形式
         var {name,purpose,go} =person2;
         //等价于(还原代码)
         //var name =person2.name;
         //var purpose=person2.purpose;
         console.log(name,purpose)
         go();


         //为什么需要提供两种方式呢？一个是.一个是[]

3.7、传播操作符…

3.8、数组map、reduce【了解】

数组的map用法
数组的 reduce

4.Babel（转码工具）

4.1简介

4.2安装babel

npm install -g babel-cli #全局安装babel

#查看是否安装成功
babel --version

4.3使用babel

1. 创建一个配置文件.babelrc 存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
2. 配置文件中编写转码规则

{
    "presets": ["es2015"],
    "plugins": []
}

3. 安装转码器 npm install --save-dev babel-preset-es2015
4. 转码即可
   单个文件： babel src/example.js -o dist1/compiled.js将src目录下js文件转码生成到dist1目录下，生成文件compiled.js
   整个目录：babel src -d dist2 将src目录中的所有文件转码生成在dist2目录下

5.Webpack（打包工具）

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
人话：就是把所有的js文件css等静态资源文件，通过一个入口合并生成为一个文件！

5.1安装Webpack

npm install -g webpack webpack-cli  #全局安装
webpack -v    						#安装后查看

5.2 使用方法

1. 初始化一个node项目 ，然后编写几个js和css文件 例如：common.js/util.js/main.js
   在main.js文件当中引入其余的js文件
   

2. 默认情况下webpack只能处理JavaScript模块，如果需要将css模块也打包在一块需要安装一个资源转换器，安装命令：npm install --save-dev style-loader css-loader

3. 然后在根目录编写一个webpack.config.js的打包配置文件。在配置文件中编写必要的配置：1.设置入口文件：把main.js设置为入口文件其中main.js中涉及到的所有js文件都会被打包 2.设置打包后生成文件目录：生成一个bundle.js文件就是包含main.js中的所有js文件

4. 完工! 直接引用生成的bundle.js文件即可

6.模块化开发

简介

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

6.1 CommonJS模块化开发

模块导出

模块导入

CommonJS使用 exports 和require 来导出、导入模块。

6.2 ES6模块化开发

• 方式一 ：每个单独的方法使用模块化导出export function，然后引入每个方法
  

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行，执行生成的ES5文件。

• 方式二：模块化导出export default ，导入则是类似导入一个对象的形式
  
  以上就是学习Vue要具备的前端基础知识，基本都是最简单的使用的方法和概念，具体的还是得看官方文档，这个只供学前Vue前去了解一下这些个知识点！