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
- 创建一个配置文件.babelrc 存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下。
- 配置文件中编写转码规则
{
"presets": ["es2015"],
"plugins": []
}
- 安装转码器
npm install --save-dev babel-preset-es2015
- 转码即可
单个文件: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 使用方法
-
初始化一个node项目 ,然后编写几个js和css文件 例如:common.js/util.js/main.js
在main.js文件当中引入其余的js文件
-
默认情况下webpack只能处理JavaScript模块,如果需要将css模块也打包在一块需要安装一个资源转换器,安装命令:
npm install --save-dev style-loader css-loader
-
然后在根目录编写一个webpack.config.js的打包配置文件。在配置文件中编写必要的配置:1.设置入口文件:把main.js设置为入口文件其中main.js中涉及到的所有js文件都会被打包 2.设置打包后生成文件目录:生成一个bundle.js文件就是包含main.js中的所有js文件
-
完工! 直接引用生成的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前去了解一下这些个知识点!