前端学习day1

1.ES6

1.var全局使用，let块级使用

let: 用于声明变量，取代 var。let声明的变量只在它所在的代码块（如 {}内部）内有效，解决了 var的变量提升和全局污染问题。

const: 用于声明常量。一旦声明，常量的值就不能改变。对于对象和数组，const保证的是变量指向的内存地址不变，但对象本身的属性是可以修改的。

// var 的问题

for (var i = 0; i < 3; i++) {

setTimeout(() => console.log(i), 100); // 输出 3, 3, 3

}

// 使用 let 解决

for (let j = 0; j < 3; j++) {

​ setTimeout(() => console.log(j), 100); // 输出 0, 1, 2

}

2.箭头函数

所在的对象，这解决了传统函数 this指向混乱的问题。

// 传统函数

const add1 = function(a, b) {

return a + b;

};

// 箭头函数

const add2 = (a, b) => a + b;

3.字符串拼接

使用反引号 `定义字符串，可以嵌入变量（使用 ${expression}）。

const name = “李华”;

const age = 25;

// ES5 繁琐的拼接

var str1 = “我叫” + name + “，今年” + age + “岁。”;

// ES6 模板字符串

const str2 = 我叫${name}，今年${age}岁。;

4.模块化（inmport和）

ES6 引入了官方的模块化语法，使代码可以分割成多个小文件，便于组织和维护。

// math.js - 导出模块

export const PI = 3.14159;

export function add(a, b) {

return a + b;

}

// 或者统一导出

// export { PI, add };

// main.js - 导入模块

import { PI, add } from ‘./math.js’;

console.log(PI);

console.log(add(5, 3));

// 也可以导入全部内容作为一个模块对象

import * as math from ‘./math.js’;

console.log(math.PI);

5.promis调用

提供了更强大的异步编程解决方案，避免了“回调地狱”（Promise 可以让异步代码变成链式调用，避免嵌套：）。

假设我们需要依次执行以下异步操作：

读取文件 A

读取文件 B

写入文件 C

发送 HTTP 请求

2.npm

1、简单来说，npm 就像是 JavaScript 世界的“应用商店”。你想实现一个功能（比如日期格式化、发送 HTTP 请求），不需要自己从头写代码，只需要通过 npm 命令“安装”别人已经写好的、成熟的包即可。

2、npm安装
npm 是随 ​​Node.js​​ 一起安装的。你只需要去 Node.js 官网下载并安装 LTS（长期支持版），npm 就会自动被安装。

安装完成后，在终端或命令行中输入以下命令来检查是否成功：

node -v # 查看 Node.js 版本

npm -v # 查看 npm 版本

3、初始化项目：npm init

当你开始一个新项目时，首先要在项目根目录下初始化，生成 package.json文件。

# 进入你的项目目录

cd my-project

# 初始化，会有一系列问答引导你创建 package.json

npm init

# 使用 -y 参数可以快速生成一个默认的 package.json，跳过所有问答

npm init -y

安装包：npm install

这是最常用的命令。

安装生产依赖：项目运行时必须的包（如 React, Vue, Express）。

全局安装：npm install

指定安装某包：npm install

全局安装某指定包：npm install -g

这会将包安装到 node_modules文件夹，并在 package.json的 dependencies字段中添加记录。

3.echarts

需要去官网下载echarts.js文件，然后导入项目里，然后生成一个echarts初始换的变量

调用官网的option对象就可以生成

`

<div id="main"></div>
<script src="echarts.js"></script>

<script>
    var element = document.getElementById("main");
    var myChart = echarts.init(element);

​ var option = {
​ title: {
​ text: ‘World Population’
​ },
​ tooltip: {
​ trigger: ‘axis’,
​ axisPointer: {
​ type: ‘shadow’
​ }
​ },
​ legend: {},
​ xAxis: {
​ type: ‘value’,
​ boundaryGap: [0, 0.01]
​ },
​ yAxis: {
​ type: ‘category’,
​ data: [‘Brazil’, ‘Indonesia’, ‘USA’, ‘India’, ‘China’, ‘World’]
​ },
​ series: [
​ {
​ name: ‘2011’,
​ type: ‘bar’,
​ data: [18203, 23489, 29034, 104970, 131744, 630230]
​ },
​ {
​ name: ‘2012’,
​ type: ‘bar’,
​ data: [19325, 23438, 31000, 121594, 134141, 681807]
​ }
​ ]
​ };

​ myChart.setOption(option);
​

`

4.element-plus

安装
	npm install element-plus --save

src\main.js
	import { createApp } from 'vue'
	import App from './App.vue'

	//路由
	import router from './router' //导入路由模块

	//整体导入 ElementPlus 组件库
	import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
	import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 css 样式
	import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
	import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包


	const app = createApp(App)

	app.use(router) //将 Vue Router 插件注册到 Vue 应用中

	//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	    app.component(key, component)
	}
	app.use(ElementPlus, { //将 ElementPlus 插件注册到 Vue 应用中
	    locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
	})

	app.mount('#app')

src\views\admin\login.vue
	<script setup>

	</script>

	<template>
	    <h3>登录页</h3>

	    <el-icon><User /></el-icon>

	    <hr>

	    <el-button type="primary">登录</el-button>
	</template>

	<style scoped>

	</style>