开发环境
vs code +各种插件(chinese, node.js module intellisense,ESLint, Live Server, vetur,vue helper)
python(Node.js需要一些类库)
node.js(在服务器端运行JS代码! 基于 Coogle 的 V8 引擎,可以脱离浏览器执行 js 代码)
NodeJS基本使用
1、创建文件夹 nodejs
2、创建我们的 01-控制台程序.js
3、打开终端执行js程序node *.js
ES6语法详解
浏览器一般都是只支持es5语法, ES6是 JavaScript的下一代标准,2015年发布。在IDEA中默认配置ECMAScript5版本,我们要编写es6的语法,需要配置。
声明变量var 与let区别
作用域 | |
---|---|
var | var 声明的变量没有作用域,作用域也可以提升,可以重复声明, |
let | let 声明的变量是有作用域,作用域不能提升,一定要先初始化。不可以重复声明 |
如何声明常量(es6)
const PI=‘3.1415926’
一但声明就必须初始化,而且不能修改变量值。
结构赋值
结构的变量名必须和对象属性同名
let user = { name:‘name a’,age:‘18’}
let user = { name: 'zhangsan', age: 18 }
let {name, age} = user
模板字符串声明(直接在字符串中调用变量)
let string = `name: ${user.name} age: ${user.age}`
声明对象简写,定义方法简写,函数的默认参数声明,箭头函数 (参数 => 函数体)
不做详述
在默认参数中可能会遇到undefined与null的区别。
对象拓展运算符
对象得引用赋值,对象得深度拷贝。
let user = {name:'user, originName', age:'3'}
let refer = user
let deepCopy = {...user}
refer.name = 'user name changed'
console.log(user)
console.log(refer)
console.log(deepCopy)
NPM的使用
NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布 Node模块(包)的标准。就好比maven,所有东西只要到导入依赖即可,npm 也是如此,npm install,好比Linux 的 yum 安装。 package.json就好像我们的pom.xml.
生成自己的package.json
npm init
npm init -y
修改 npm 镜像
npm config lis //check all the config parameters
经过以下配置,就可以让所有的依赖下载通过 淘宝的镜像,这样会比较快!
npm config set registry https://registry.npm.taobao.org/
管理依赖控制
1、npm install vue 安装指定依赖,默认是最新版本
2、npm install vue@x.x.x 指定版本安装!
3、package.json 中管理了所有依赖版本控制,就如同 pom.xml
4、指定只在开发的时候使用 npm install --save-dev (等价-D) eslint
默认是latest,也可以指定自己的version. package.json与package-lock.json是成对出现的。
"devDependencies": {
"eslint": "^6.8.0"
}
全局依赖的安装
C:\Users\【user name】\AppData\Roaming\npm\node_modules
其他常见命令
npm update
npm update jquery
npm unintall jquery
Babel
Babel 是一个广泛的转码器,可以将 ES6代码转换为 ES5的代码,语法会自动转换,很多se6高级语法,浏览器是不支持的, Nodejs也不一定能运行.
安装 Babel
npm install -g babel-cli # 安装babel-cli
babel --version # 版本测试 6.26.0 (babel-core 6.26.3)
如何使用Babel
1 安装babel依赖
npm install -D babel-preset-es2015
2 另外
package.json 中设置
{ "presets": [ "es2015" ], "plugins": [] }
3 在 src 在编写js源代码 编写.babelrc 配置文件
输出测试
另外可以在package.json中自定义脚本
{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel .\\src\\example.js --out-file .\\dist\\dist.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1"
}
}
npm run
这里可以编写多个脚本,以后启动就不需要每一次都输入命令了。
npm run test
npm run dev
npm run start
本质就是一段脚本,以后看到类似的启动方式,就可以去找它的 scripts 脚本。
模块化
js 是否也可以模块化开发呢,有几种方式class 、 package 、module.产生了两种模块化规范:CommonJS 规范ES6模块化规范.
ES6模块化规范导出:
export function getList() {
console.log('获取用户列表')
}
export function save() {
console.log('保存用户信息')
}
ES6模块化规范导入:
import { getList, save } from './userApi.js'
getList()
save()
还有其他整体模块化导出导入的语法。
export default {
getList() {
console.log("获取数据列表")
},
save() {
console.log("保存用户")
}
}
-------------------------
import user from './userApi2.js'
user.getList()
user.save()
注意NodeJs不支持module的导入导出,目前还需要babel的降级,才能用node来执行降级以后的js文件。
WebPack
Webpack 是一个前端的资源、打包工具! js less css png ====> .js
webpack 安装
1、安装
npm install -g webpack webpack-cli
webpack -v
2、初始化项目
修改你的package.json.
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.2",
"style-loader": "^1.1.3"
}
}
然后执行:
npm run dev
就可以打包。