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

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

1|01.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|02.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|03.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|04.Babel（转码工具）

4.1简介
在这里插入图片描述

4.2安装babel

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

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

4.3使用babel

  1. 创建一个配置文件.babelrc 存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
  2. 配置文件中编写转码规则
{
    "presets": ["es2015"],
    "plugins": []
}
  1. 安装转码器 npm install --save-dev babel-preset-es2015
  2. 转码即可
    单个文件： babel src/example.js -o dist1/compiled.js将src目录下js文件转码生成到dist1目录下，生成文件compiled.js
    整个目录：babel src -d dist2 将src目录中的所有文件转码生成在dist2目录下

5|05.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|06.模块化开发

简介

随着网站逐渐变成”互联网应用程序”，嵌入网页的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前去了解一下这些个知识点！

__EOF__

本文作者：宋淇祥
本文链接：https://www.cnblogs.com/qxsong/p/15837321.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   爪洼ing  阅读(68)  评论(0)  编辑  收藏  举报
相关博文：
· Vue-04-Vue-cli创建webpack模板项目结构分析
· Vue-02-第一个vue-cli程序
· Vue框架简介和环境搭建
· Vue小入门
· 大前端进阶
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

了解更多